Piwigo.org

ClémentA9300 · 2022-05-30 22:25:14

Bonjour/Bonsoir,

Je recherche comment faire pour que le titre de la photo n'apparaisse plus lors du survol de l'image. Je souhaiterai que rien ne s'affiche lors que l'on passe la souris au-dessus des photos. Surtout pas le nom du fichier.

Merci par avance.

Bonne soirée

Version de Piwigo:
Version de PHP:
Version de MySQL:
URL Piwigo: http://www.clementancla.fr/picture.php? … ecent_pics

Katryne · 2022-05-31 08:03:52

Bonjour ! Ce plugin permet de ne pas afficher les "tooltip" au survol ; https://piwigo.org/ext/extension_view.php?eid=738

Ça, c'est pour la photo.

Existe-t-il quelque chose de similaire pour le survol des vignettes de photos dans les albums et pour les vignettes d'album ? C'est toute ma description qui s'affiche au survol et parfois, en mode source, avec toutes les balises html.

ClémentA9300 · 2022-05-31 22:41:39

Bonsoir,

Merci pour votre réponse. Malheureusement cela ne fonctionne pas, même avec ce plugin, le titre s'affiche toujours lors du survol des photos. Peut-être un souci avec mon thème ?

Katryne · 2022-05-31 23:44:21

Vous avez raison, ça ne fonctionne pas.

k5 · 2022-05-31 23:58:47

Bonjour/bonsoir,
Sur quel thème ? Svp merci
À très vite

Katryne · 2022-06-01 06:12:17

Bonjour K5
En fait ça ne marche pas pour le survol des photos. Mais c'est OK pour le survol des vignettes en pages album. C'est peut-être normal : après tout, le plugin Thumbnail Tooltips, c'est pour les infobulles (tooltips) des vignettes (Thumbnails).
Comment fait-on pour les photos ?

(j'utilise BootStrap Darkroom sur un site et Modus sur l'autre)

polowigo · 2022-06-01 07:39:08

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

Katryne · 2022-06-01 08:04:03

J'ai presque réussi, enfin j'ai un début de piste : pas encore pu zigouiller l'infobulle, mais au moins, je peux choisir ce que j'y mets.

Quand je ne mets rien dans la description de la photo, l'infobulle affiche : Titre - nom du fichier.

Quand je mets une description, c'est le texte de la description qui s'affiche au survol. Là, j'ai mis "scrogneugneu", pour bien repérer d'où vient l'affichage : https://album.chauvigne.info/picture?/C … s_de_nancy

J'ai maintenant 4 scrogneugneu en mode source. Où doit-on agir ?

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

polowigo · 2022-06-01 13:15:30

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

Katryne · 2022-06-01 13:36:40

mouiiiii mais ... comment s'appelle tooltip en pays Piwigo ? j'ai beau tartiner le . tooltip de tout le css que je peux, même avec du !important, (display none, background en rouge ...) ya rien qui change.
Quel est donc le nom du sélecteur ?

polowigo · 2022-06-01 19:05:10

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.

Katryne · 2022-06-01 19:50:05

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

polowigo · 2022-06-01 20:03:54

Bien vu ! Plus de bulle.

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

Katryne · 2022-06-01 20:12:15

C'était dans la description, je l'ai retiré, juste là.

ClémentA9300 · 2022-06-01 20:36:02

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 !

Piwigo.org

Annonce

#1 2022-05-30 22:25:14

Cacher le titre des photos lors du survol de la souris

#2 2022-05-31 08:03:52

Re: Cacher le titre des photos lors du survol de la souris

#3 2022-05-31 22:41:39

Re: Cacher le titre des photos lors du survol de la souris

#4 2022-05-31 23:44:21

Re: Cacher le titre des photos lors du survol de la souris

#5 2022-05-31 23:58:47

Re: Cacher le titre des photos lors du survol de la souris

#6 2022-06-01 06:12:17

Re: Cacher le titre des photos lors du survol de la souris

#7 2022-06-01 07:39:08

Re: Cacher le titre des photos lors du survol de la souris

#8 2022-06-01 08:04:03

Re: Cacher le titre des photos lors du survol de la souris

#9 2022-06-01 13:15:30

Re: Cacher le titre des photos lors du survol de la souris

#10 2022-06-01 13:36:40

Re: Cacher le titre des photos lors du survol de la souris

#11 2022-06-01 19:05:10

Re: Cacher le titre des photos lors du survol de la souris

#12 2022-06-01 19:50:05

Re: Cacher le titre des photos lors du survol de la souris

Code:

Code:

#13 2022-06-01 20:03:54

Re: Cacher le titre des photos lors du survol de la souris

#14 2022-06-01 20:12:15

Re: Cacher le titre des photos lors du survol de la souris

#15 2022-06-01 20:36:02

Re: Cacher le titre des photos lors du survol de la souris

Katryne a écrit:

Code:

Code:

Pied de page des forums