Annonce

  •  » Styles
  •  » Cacher le titre des photos lors du survol de la souris

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

ClémentA9300
Invité

Cacher le titre des photos lors du survol de la souris

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

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

Katryne
Membre
Provence
2016-12-03
1195

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

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.


https://photos.revestou.fr/  v.12.2 - https://dardennes.revestou.fr/ v.11.5 - http://photos.katrynou.fr/ v.11.5 https://album.chauvigne.info/ v.12.2
Système d'exploitation: Linux - Hébergeur 1&1-Ionos PHP: 7.4.29 - MySQL: 5.7.38
Bibliothèque graphique: External ImageMagick 6.9.10-23

Hors ligne

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

ClémentA9300
Invité

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

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 ?

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

Katryne
Membre
Provence
2016-12-03
1195

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

Vous avez raison, ça ne fonctionne pas.


https://photos.revestou.fr/  v.12.2 - https://dardennes.revestou.fr/ v.11.5 - http://photos.katrynou.fr/ v.11.5 https://album.chauvigne.info/ v.12.2
Système d'exploitation: Linux - Hébergeur 1&1-Ionos PHP: 7.4.29 - MySQL: 5.7.38
Bibliothèque graphique: External ImageMagick 6.9.10-23

Hors ligne

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

k5
Équipe Piwigo
La reppe
2014-01-26
891

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

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


Beta test sur Github Codespaces !!!

Hors ligne

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

Katryne
Membre
Provence
2016-12-03
1195

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

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)


https://photos.revestou.fr/  v.12.2 - https://dardennes.revestou.fr/ v.11.5 - http://photos.katrynou.fr/ v.11.5 https://album.chauvigne.info/ v.12.2
Système d'exploitation: Linux - Hébergeur 1&1-Ionos PHP: 7.4.29 - MySQL: 5.7.38
Bibliothèque graphique: External ImageMagick 6.9.10-23

Hors ligne

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

polowigo
Membre
2019-04-11
124

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

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

Hors ligne

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

Katryne
Membre
Provence
2016-12-03
1195

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

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.


https://photos.revestou.fr/  v.12.2 - https://dardennes.revestou.fr/ v.11.5 - http://photos.katrynou.fr/ v.11.5 https://album.chauvigne.info/ v.12.2
Système d'exploitation: Linux - Hébergeur 1&1-Ionos PHP: 7.4.29 - MySQL: 5.7.38
Bibliothèque graphique: External ImageMagick 6.9.10-23

Hors ligne

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

polowigo
Membre
2019-04-11
124

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

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

Hors ligne

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

Katryne
Membre
Provence
2016-12-03
1195

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

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 ?


https://photos.revestou.fr/  v.12.2 - https://dardennes.revestou.fr/ v.11.5 - http://photos.katrynou.fr/ v.11.5 https://album.chauvigne.info/ v.12.2
Système d'exploitation: Linux - Hébergeur 1&1-Ionos PHP: 7.4.29 - MySQL: 5.7.38
Bibliothèque graphique: External ImageMagick 6.9.10-23

Hors ligne

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

polowigo
Membre
2019-04-11
124

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

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.

Hors ligne

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

Katryne
Membre
Provence
2016-12-03
1195

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

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


https://photos.revestou.fr/  v.12.2 - https://dardennes.revestou.fr/ v.11.5 - http://photos.katrynou.fr/ v.11.5 https://album.chauvigne.info/ v.12.2
Système d'exploitation: Linux - Hébergeur 1&1-Ionos PHP: 7.4.29 - MySQL: 5.7.38
Bibliothèque graphique: External ImageMagick 6.9.10-23

Hors ligne

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

polowigo
Membre
2019-04-11
124

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

Bien vu ! Plus de bulle.

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

Hors ligne

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

Katryne
Membre
Provence
2016-12-03
1195

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

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


https://photos.revestou.fr/  v.12.2 - https://dardennes.revestou.fr/ v.11.5 - http://photos.katrynou.fr/ v.11.5 https://album.chauvigne.info/ v.12.2
Système d'exploitation: Linux - Hébergeur 1&1-Ionos PHP: 7.4.29 - MySQL: 5.7.38
Bibliothèque graphique: External ImageMagick 6.9.10-23

Hors ligne

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

ClémentA9300
Invité

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

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 !

  •  » Styles
  •  » Cacher le titre des photos lors du survol de la souris

Pied de page des forums

Propulsé par FluxBB

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