richfaces 4 rich:message as icon with tooltip

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:rich="http://richfaces.org/rich"
                xmlns:c="http://java.sun.com/jsp/jstl/core">

    <c:set var="tooltipId" value="#{for}tooltip"/>

    <rich:message id="#{for}Message" for="#{for}" showDetail="false" showSummary="false" styleClass="message-icon"
                  onmouseover="#{rich:component(tooltipId)}.show(event)"
                  onmouseout="#{rich:component(tooltipId)}.hide()"/>
    <rich:tooltip id="#{tooltipId}" target="#{for}Message">
        <rich:message for="#{for}" styleClass="message-text"/>
    </rich:tooltip>

</ui:composition>

 

.message-icon .rf-msg-err {
    background-image: url("../resources/images/icons/ico_error.gif");
    display: inline-block;
    height: 16px;
    padding: 0px;
    width: 16px;
}

.message-text .rf-msg-err {
    background-image: none;
    padding-left: 2px;
}