Mehrzeilige Tooltips in JSF bzw. HTML

W3Schools.com

<a href="#" title="Der einzeilige Tooltip">W3Schools.com</a>

<p title="Free Web tutorials">W3Schools.com</p>

Machmal genügt ein einzeiliger Tooltip nicht.

<style type="text/css">
a.de_wwaag_alma_a_info{
position:relative;
z-index:24;
color:#ffffff;
background-color:#ff0000;
text-decoration:none
}

a.de_wwaag_alma_a_info:hover{z-index:25;}

a.de_wwaag_alma_a_info span{display: none}

a.de_wwaag_alma_a_info:hover span{
display:block;
position:absolute;
width:400px;
padding:5px;
border:1px solid #000;
background-color:#ffffce;
text-align: left
<style>

<f:verbatim>
<a class="de_wwaag_alma_a_info">
<img alt="" src="/alma-portlets/img/alma_info.png">
<span>Mit Hilfe einer jährlich extern durchgeführten Beschwerdeführer-Befragung
 soll eine höhere Kundenzufriedenheit erreicht werden. Einige Beschwerdevorgänge
 (z. B. Mahnfälle) eignen sich nicht dazu, mit einem zeitlichen Abstand durch Dritte
 noch einmal telefonisch beim Kunden in Erinnerung gerufen zu werden. Das Ankreuzfeld
 soll Ihnen nach Ihrem Ermessen ermöglichen, diesen Beschwerdefall von künftigen
 Befragungsaktionen auszunehmen
</span>
</a>
</f:verbatim>