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

<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

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 :

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

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

.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.