[Réglé] Support des styles ⇒ Tooltip Breizh Code

[OptimaluS]

Bonjour Sylver,

* Tous mes meilleurs vœux pour cette année 2019
J'ai repairer sur ton forum la fonction Tooltip qui est très bien réalisée. Je me demander ci tu pouvez partager les codes source de celle-ci ?

Merci d'avance.

[Sylver35]

Bonjour,

Pour l'effet tooltip (qui remplace l'attribut title dans un lien) il faut donc faire des modifications dans ton style.

Premièrement, ne pas toucher au style prosilver qui doit rester intact.
Tu doit avoir un style enfant de prosilver, c'est lui qui doit être modifié.

En premier, la modification du lien (<a...)
Dans la balise lien tu ajoute:

code : Tout sélectionner

 class="tooltip"

Seulement si le lien ne comporte pas déjà un attribut class, sinon tu ajoute seulement tooltip dedans.
Ensuite, le lien doit contenir l'attribut title, sinon, tu l'ajoute avec dedans la clef de langue voulue.

Création du span:
le lien doit contenir un span avec un attribut title vide title="".
Si un span existe déjà il suffit d'ajouter l'attribut title dedans.

code : Tout sélectionner

<span title="">Ton lien</span>

Un exemple, le lien "Index du forum":

code : Tout sélectionner

<a href="{U_SITE_HOME}" itemprop="url" data-navbar-reference="home" class="tooltip"><i class="icon fa-home fa-fw" aria-hidden="true"></i><span itemprop="title" title="">{L_SITE_HOME}</span></a>

La partie css:
A mettre dans par exemple le fichier common.css de ton style:

code : Tout sélectionner

a:hover span, a:focus span{
	opacity:1.5;
}

.tooltip{
	display: inline;
	position: relative;
}
.tooltip:hover:after{
	background: #333;
	background: rgba(0,0,0,.8);
	border-radius: 5px;
	bottom: 26px;
	color: #fff;
	content: attr(title);
	left: 20%;
	padding: 5px 15px;
	position: absolute;
	z-index: 1000;
	width: 220px;
}
.tooltip:hover:before{
	border: solid;
	border-color: #333 transparent;
	border-width: 6px 6px 0 6px;
	bottom: 20px;
	content: "";
	left: 50%;
	position: absolute;
	z-index: 1000;
}

Tu peut jouer avec le css pour obtenir les effets voulus

[OptimaluS]

Merci pour le partage, je test et je reviendrais ci je n'arrive pas à régler un détail.