Peut-on modifier l'aspect graphique des bulles d'informations ?

Oui c'est simple en fait ce qui cloche c'est que tooltipster n'existe pas.

test les urls des cdn

https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/js/tooltipster.bundle.min.js

Donc on va sur cdnjs et on choppe la dernière version

https://cdnjs.cloudflare.com/ajax/libs/tooltipster/4.2.8/css/tooltipster.bundle.min.css

Si ca ne fonctionne pas il reste ceci
https://www.pierre-giraud.com/javascript-apprendre-coder-cours/dom-manipulation-attribut-style-css/
Modifié par uniuc (04 Jun 2023 - 18:17)

Olivier C a écrit :
Salut,
Le site utilise déjà jQuery ? Parce qu'il ne faut pas télécharger un script aussi conséquent juste pour une info bulle !

Je ne comprends pas ! J'ai déjà du mal à comprendre JavaScript, quand à JQuery, je ne le connais que de nom, je n'ai jamais touché à ce langage et je ne l'ai donc jamais utilisé, c'est sûr et certain.

Sinon, j'ai trouvé cette autre solution n'utilisant que du HTML et du CSS et ça marche :

HTML

<p>Survolez le texte ci-dessous pour afficher l'infobulle personnalisée :</p>
  
  <div class="custom-tooltip">
    Hover over me
    <span class="tooltip-text">Ceci est une infobulle personnalisée !</span>
  </div>

CSS

.custom-tooltip {
      position: relative;
      display: inline-block;
      cursor: pointer;
    }
    
    .custom-tooltip .tooltip-text {
      visibility: hidden;
      background-color: #000;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px;
      position: absolute;
      z-index: 1;
      bottom: 125%;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0;
      transition: opacity 0.3s;
    }
    
    .custom-tooltip:hover .tooltip-text {
      visibility: visible;
      opacity: 1;
    }

Bonjour,

l'inconvénient des solutions CSS - fonctionnant au survol - est que ça ne fonctionne pas au clavier (peu accessible donc) et a priori pas sur mobile...
Il faut un élément interactif capable de prendre le focus clavier pour que ça ait une chance de fonctionner au clavier (bouton, lien, ...)

Nico3333fr a développé ce script de Tooltip accessible https://van11y.net/accessible-simple-tooltip/
Faudra que je reteste avec le lecteur d'écran Voiceover prochainement mais ça fonctionne avec NVDA en tout cas (au focus clavier, c'est lu).
Ou bien https://github.com/scottaohara/a11y_tooltips OK aussi avec NVDA

Pour aller trop loin
2 très longues ressources qui abordent en long, en large et en anglais le pourquoi du comment et l'accessibilité : https://www.sarasoueidan.com/blog/accessible-tooltips/ et https://inclusive-components.design/tooltips-toggletips/
Sinon dans les grands et gros frameworks il y a tous ceux-là https://open-ui.org/components/tooltip.research/ (pour quand on en utilise déjà un...)

Merci Felipe pour ta réponse pertinente. C'est vrai que je n'ai pas pensé à l'accessibilité sur clavier et sur mobile. Au final, je ne vais pas modifier la présentation des infobulles car ce n'est pas intéressant, surtout que sur la page web sur laquelle je les utilise, elle n'est utilisée que 5 fois maximum et le contenu n'est formé que d'une phrase de 4 mots pas vraiment importante, alors que cette infobulle apparaît au survol d'un pictogramme qui est déjà en lui-même explicite. Inutile donc d'alourdir le code pour quelque chose de pas vraiment pertinent. C'est juste utile pour le cas où mais pas vraiment important.

Cependant, je garde tes liens, surtout celui de Nico3333fr et son script de Tooltip, car je l'ai testé et il me plait, notamment pour un autre projet ou l'utilisateur doit se balader parmi une multitude de petits blocs et au survol il obtient des informations complémentaires et détaillées. Dommage que je ne sais pas comment utiliser GitHub, je le saurais peut être plus tard quand je me pencherais sur le sujet.

A l'origine, je trouvais que l'infobulle générée par l'attribut HTML "title" était trop petite. Je cherchais à savoir s'il y avait moyen de grossir la taille de caractères et pourquoi pas changer la police, la graisse, la couleur de fond, etc. On peut le faire en passant par les CSS ou par une bibliothèque JS Tooltipster. Mais finalement, si le lien qui affichera l'infobulle est de base explicite pas besoin d'ajouter cette infobulle et donc pas besoin de personnaliser sa présentation.
Modifié par ObiJuanKenobi (06 Jun 2023 - 08:04)

Bonjour,

A tout ce qui a déjà été dit, on peut rajouter que les scripts comme tooltipster ne permettent pas de changer l'apparence des info-bulles de l'attribut title.
C'est totalement impossible.

En fait, ce genre de script les remplace complètement par autre chose, en supprimant l'attribut title au passage et/ou en bloquant les évènements hover/mouseover/etc.

Ca peut paraître faible comme distinction, mais ça a une considérable importance en matière d'accessibilité.
L'attribut title est critiqué car il n'est pas lu égalitairement sur toutes les plates-formes et donc il y a aujourd'hui beaucoup mieux, mais le script qui les remplace automatiquement, lui, produit quelque chose de probablement totalement inaccessible.