personnalisation des infobulles

[Lilynufare]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome
Personnes concernées par le problème : Moi uniquement
Problème apparu depuis : 09/09/2024
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour,

J'aimerai pouvoir personnaliser l'infobulle, la partie du mot pseudo dans le code ci-dessous. Pour le moment, c'est juste un cadre blanc, et j'aimerai le personnaliser. J'ai tenté de faire, mais apparemment, ça ne fonctionne pas.

Merci de votre attention.

Code:

<div class="blocmembre"><a target="_blank" href="https://welcometosunnydale.forumactif.com/" title="lien vers le membre"><img src="https://zupimages.net/up/24/37/wfcv.png" alt="membre" title="Pseudo" /></a></div>

['Christa]

Hello,

L'infobulle qui apparait au survol d'un lien (ou tout autre élément) auquel on a donné un attribut title est gérée par ton navigateur, tu ne peux pas la modifier en HTML.

Il existe sur internet moult plugins de "tooltips" qui permettent d'avoir ce résultat. Forumactif utilise le plugin tooltipster.js par défaut sur ses forums (on le voit en action sur les mentions), mais ça nécessite de savoir le mettre en place et le customiser.

Basiquement :
- Tu mets sur ton élément auquel tu veux rajouter une infobulle une classe de ton choix, on va dire tooltip-membre
- Sur ce même élément, tu rajoutes l'attribut title avec le contenu (textuel) de ton choix
- Et tu rajoutes un JS sur ton forum dans lequel tu "appelles" le plugin tooltipster pour qu'il fonctionne spécifiquement sur tes éléments qui ont la classe définie plus haut :

Code:

   $(document).ready(function(){
      $('.tooltip-membre').tooltipster();
    });

Pour aller plus loin cependant, il te faudra te farcir la documentation du plugin tooltipster.js. Apparemment sur Forumactif le style utilisé est celui par défaut, et la documentation sur comment mettre un style personnalisé suggère d'utiliser un "thème secondaire". Malheureusement, je ne suis pas allée beaucoup plus loin que ça donc si quelqu'un d'autre a des compléments à ajouter, il sera le bienvenu.

Bonus : Tu devrais pouvoir récupérer des liens pour installer les autres thèmes de tooltipster sur jsdelivr (copy to clipboard -> HTML -> mets ça dans ton overall header avant la balise head fermante)

[Lilynufare]

Bonjour,
Merci de ta réponse, je vais essayer tout ça.

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses apportées.