Bonjour,
Les balises "title" et "alt"sont utiles pour le référencement des pages.

Une solution  pour "Cacher le titre des photos lors du survol de la souris" passe par un javascript qui :
1 -Supprime temporairement le contenu de la balise" title "de l'élément X lorsqu'il est survolé et avant que le navigateur n'affiche le titre.

2 - Remettre le titre en place lorsque l'élément X perd le focus.

C'est peu ou prou ce que je fait dans le plugin LLGBO ( mais que sur certains éléments de la "page picture")

En fait, selon cet article d'AlsaCréation, l'attribut Title sur les images ne sert quasi à rien, et il est même la plupart du temps plus nuisible qu'utile. Contrairement à l'attribut ALT pour les images qui sert aux robots indexeurs, aux lecteurs de pages pour déficients visuels et en remplacement de l'image quand un problème technique empêche son affichage. Et l'attribut ALT doit être signifiant, sinon, ça sert à rien.
https://www.alsacreations.com/astuce/li … liens.html

Katryne a écrit:

J'ai pas réussi à placer un span pour définir le css du tooltip.
J'ai cherché où se trouve défini le contenu de title, puisque c'est ça qu'affiche l'infobulle..
Dans Bootstrap Darkroom, c'est dans picture_content.tpl, dans la 2e partie de la ligne 24.

Code:

<img {if $current.selected_derivative->is_cached()}src="{$current.selected_derivative->get_url()}" {$current.selected_derivative->get_size_htm()}{else}src="{$ROOT_URL}themes/bootstrap_darkroom/img/transparent.png" data-src="{$current.selected_derivative->get_url()}"{/if} alt="{$ALT_IMG}" id="theMainImage" usemap="#map{$current.selected_derivative->get_type()}" title="{if isset($COMMENT_IMG)}{$COMMENT_IMG|@strip_tags:false|@replace:'"':' '}{else}{$current.TITLE_ESC} - {$ALT_IMG}{/if}">

Si je supprime la définition de title pour ne laisser que les guillemets sans rien dedans, je n'ai plus de tooltip au survol de la photo.

Ce qui donne :

Code:

<img {if $current.selected_derivative->is_cached()}src="{$current.selected_derivative->get_url()}" {$current.selected_derivative->get_size_htm()}{else}src="{$ROOT_URL}themes/bootstrap_darkroom/img/transparent.png" data-src="{$current.selected_derivative->get_url()}"{/if} alt="{$ALT_IMG}" id="theMainImage" usemap="#map{$current.selected_derivative->get_type()}" title="">

Certes, je n'ai plus de title sur l'image, mais il reste toujours la balise alt...
Là, j'ai forké comme un sauvage, mais il faut bien sûr passer par un template extension.

Alors, vous voyez encore un scrogneugneu, là , au survol de la souris ?
https://album.chauvigne.info/picture?/C … s_de_nancy

Merci beaucoup, ça fonctionne en faisant de la sorte !

Bien vu ! Plus de bulle.

Et le "scrogneugneu" sous ta photo, c'est dans la description ?

Il n'y a de classe tooltip que si tu la crées.
Ensuite l'élément considéré doit appartenir à cette classe.

Dans l'exemple : https://www.w3schools.com/css/tryit.asp … ss_tooltip
Le texte à survoler "Hover over me" est une div de classe tooltip, le texte de la bulle "Tooltip text " est un span de classe tooltiptext inclus dans la div. Leurs styles sont intégrés dans le html.

Cet exemple prend le cas d'une div mais j'ai déjà fait ce genre de chose sur un lien <a> contenant un span.

Sur ton image, la bulle prend comme contenu par défaut le titre "scrogneugneu". Je pense que c'est dans cette zone qu'il faudrait ajouter un span contenant le texte de la bulle.

Pour le contenu variable des tooltips, je vais m'en remettre aux concepteurs du code.

En revanche, beaucoup de possibilités sont offertes quant à leur style et leur comportement, même de l'animation.
https://www.w3schools.com/css/css_tooltip.asp

Bonjour,
Éventuellement piocher des idées par ici : https://fr.piwigo.org/forum/viewtopic.php?id=29657