[Réglé] Support des stylesTooltip Breizh Code

Le support pour tout ce qui concerne les styles de phpBB toutes versions.
Répondre
Avatar de OptimaluS
France OptimaluS
Auteur du sujet
Messages : 15
Enregistré le : 18 novembre 2018
Localisation : Grand-Est
Pays :
France (fr)
France
Contact :

Tooltip Breizh Code

Message par France OptimaluS » 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 de Sylver35
France Sylver35
Administrateur du site
Messages : 728
Enregistré le : 13 janvier 2018
Relax-Arcade :  1
Localisation : Bretagne
Pays :
France (fr)
France
Contact :

Tooltip Breizh Code

Message par France Sylver35 » 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
Des chercheurs qui cherchent, on en trouve, mais des chercheurs qui trouvent, on en cherche !
Avatar de OptimaluS
France OptimaluS
Auteur du sujet
Messages : 15
Enregistré le : 18 novembre 2018
Localisation : Grand-Est
Pays :
France (fr)
France
Contact :

Tooltip Breizh Code

Message par France OptimaluS » 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
  • Membres connectés en temps réel

    🔒 Refermer le panneau des membres connectés