BBcode ToolTip

[ZePhYmA]

BBcode ToolTip


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 HTML de remplacement

Code : Tout sélectionner

<a class="tooltip" href="{URL}">{TEXT1}<span class="classic">{TEXT2}</span></a>

Ligne d'aide

Code : Tout sélectionner

[ToolTip=http://www.url.com]Le texte qui s'affiche normalement|Le tooltip ![/ToolTip]

Côté CSS

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; }

Toujours dans content.css, cherchez ceci :

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;
}

Et commentez la propriété overflow comme ceci :

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;
}

Exemple en image :

[Danny07000]

Yoh,

Merci à toi, c'est super intéressant ^^

@+++