• Membres connectés en temps réel

Support des stylesTooltip Breizh Code

Le support pour tout ce qui concerne les styles de phpBB toutes versions.
Répondre
Avatar du membre

Auteur du sujet
FranceOptimaluS
Messages : 15
Enregistré le : 18 nov. 2018
Localisation : Grand-Est
Pays :
France (fr)
France
Contact :

Tooltip Breizh Code

Message par FranceOptimaluS » 06 janv. 2019, 14:33

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.


"Cookie : Anciennement petit gâteau sucré, qu'on acceptait avec plaisir. Aujourd'hui : petit fichier informatique drôlement salé, qu'il faut refuser avec véhémence."

Avatar du membre

FranceSylver35
Administrateur du site
Messages : 162
Enregistré le : 13 janv. 2018
 
Relax-Arcade :  4
Localisation : Bretagne
Pays :
France (fr)
France
Contact :

Tooltip Breizh Code

Message par FranceSylver35 » 06 janv. 2019, 15:01

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
Bonjour la terre !!

Avatar du membre

Auteur du sujet
FranceOptimaluS
Messages : 15
Enregistré le : 18 nov. 2018
Localisation : Grand-Est
Pays :
France (fr)
France
Contact :

Tooltip Breizh Code

Message par FranceOptimaluS » 06 janv. 2019, 15:05

Merci pour le partage, je test et je reviendrais ci je n'arrive pas à régler un détail.
"Cookie : Anciennement petit gâteau sucré, qu'on acceptait avec plaisir. Aujourd'hui : petit fichier informatique drôlement salé, qu'il faut refuser avec véhémence."

Répondre