Description
J'ai adapté un Tooltip trouvé sur le net en BBcode pour mon forum, mais je le distribue si ça peut intéresser certains.
Merci à cabot pour le coup de patte au niveau de l'overflow.
BBcode ToolTip
Utilisation du BBcode
Code : Tout sélectionner
[ToolTip={URL}]{TEXT1}|{TEXT2}[/ToolTip]
Code : Tout sélectionner
<a class="tooltip" href="{URL}">{TEXT1}<span class="classic">{TEXT2}</span></a>
Code : Tout sélectionner
[ToolTip=http://www.url.com]Le texte qui s'affiche normalement|Le tooltip ![/ToolTip]
Ouvrez content.css, et ajoutez ce contenu :
Code : Tout sélectionner
/* BBcode : ToolTip
---------------------------------------- */
.tooltip {
border-bottom: 1px dotted #000000; color: #000000; outline: none;
cursor: help; text-decoration: none;
position: relative;
}
.tooltip span {
margin-left: -999em;
position: absolute;
}
.tooltip:hover span {
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute; left: 1em; top: 2em; z-index: 99;
margin-left: 0; width: 250px;
}
.classic { padding: 0.8em 1em; }
.classic {background: #FFFFAA; border: 1px solid #FFAD33; }
Code : Tout sélectionner
/* Content container styles
----------------------------------------*/
.content {
min-height: 3em;
overflow: hidden;
line-height: 1.4em;
font-family: "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
font-size: 1em;
color: #333333;
padding-bottom: 1px;
}
Code : Tout sélectionner
/* Content container styles
----------------------------------------*/
.content {
min-height: 3em;
/* overflow: hidden; */
line-height: 1.4em;
font-family: "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
font-size: 1em;
color: #333333;
padding-bottom: 1px;
}
