Annonce

Écrire une réponse

Veuillez écrire votre message et l'envoyer

Cliquez dans la zone sombre de l'image pour envoyer votre message.

Retour

Résumé de la discussion (messages les plus récents en premier)

polowigo
2022-06-02 21:48:01

Bonsoir,

Suite au sujet résolu Cacher le titre des photos lors du survol de la souris, j'ouvre cette discussion pour indiquer certains éléments.

Katryne a écrit:

Les infobulles sont quasi impossibles à styler, ça dépend, je crois, du navigateur.

Effectivement, dans le cas des "vraies" info-bulles utilisant l'attribut [title], c'est le thème du navigateur qui prévaut.

En revanche, il est possible de simuler des infobulles qui sont, elles, personnalisables. Pour cela, on adjoint à l'élément à survoler un élément span que l'on va pouvoir styliser par css.
Voici le code pour comparer les deux effets :
Le html

Code:

<ul>
  <li><a href="#" title="L'info-bulle 1">Le Lien 1</a></li>
  <li><a href="#">Le Lien 2<span>L'info-bulle 2</span></a></li>
</ul>

et le css

Code:

a span{
  padding:5px;
  margin-left:10px;
  opacity:0;
  color:#FED614;
  background: rgba(80, 80, 80, 0.5);
  -webkit-transition-timing-function: ease-out;
  -moz-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -webkit-transition:all .5s;
  -moz-transition:all .5s;
  transition:all .5s;
  -webkit-border-radius:5px;
  border-radius:5px;
}
a:hover span, a:focus span{
  opacity:1;
  z-index: 1;
}

Une remarque : on évite d'utiliser la classe tooltip qui existe déjà dans piwigo. Elle est présente dans le fichier themes/bootstrap_darkroom/css/bootstrap-darkroom/bootstrap.min.css et dans plusieurs fichiers javascript.

Pour les images, on peut suivre la même voie, après avoir enlevé son attribut "title" comme indiqué  par Katryne.
Dans picture_content.tpl, sous la ligne 24 de la balise img, on ajoute un span :

Code:

<span class="tooltiptext">{$COMMENT_IMG|@strip_tags:false|@replace:'"':' '}</span>

(J'ai choisi l'affichage de la description le l'image.)
avec comme css :

Code:

.image + .tooltiptext {
    position:relative;
    top: 100px;
    left:-400px;
    visibility: hidden;
    background-color: red;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    z-index: 1;
    opacity: 0;
    transition: opacity 1s;
}

.image:hover + .tooltiptext {
    visibility: visible;
    opacity: 1;
}

Ça n'est pas parfait mais c'est peut-être un début de piste.

Pied de page des forums

Propulsé par FluxBB

github twitter newsletter Faire un don Piwigo.org © 2002-2022 · Contact