5545 sujets

Sémantique web et HTML

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

Bonjour à vous tous,

Je voudrais savoir s'il y a possibilité de personnaliser avec les CSS ou autre, les infobulles générés avec l'attribut "title". Je parle de changer la police de caractères, la taille de caractère, la couleur, la graisse, la couleur de fond de l'infobulle elle-même, etc.

Merci pour votre aide et
que le code soit avec vous !
Merci uniuc pour ton lien.
J'ai fait des recherches de mon côté et apparemment on peut modifier l'infobulle en utilisant une bibliothèque JS Tooltipster.
Après avoir placé le code dans le <head>, celui dans le corps du <body>, puis celui dans le CSS et enfin celui en bas du <body>, ça ne marche pas. Je ne sais pas ce qui cloche. Quelqu'un saurait ?

code HTML à placer dans le <head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/tooltipster.min.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/js/tooltipster.bundle.min.js"></script>

Code HTML à placer dans le <body>
<span class="custom-tooltip" title="Ceci est une infobulle personnalisée">Survolez-moi pour afficher l'infobulle</span>

Code CSS
.custom-tooltip {
      cursor: help;
    }

Code JS à placer à la fin du code HTML
$(document).ready(function() {
      $('.custom-tooltip').tooltipster({
        theme: 'tooltipster-custom',
        delay: 200,
        animationDuration: 300,
        side: 'top',
        arrow: false,
        interactive: true
      });
    });
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 !
Oui c'est simple en fait ce qui cloche c'est que tooltipster n'existe pas.

test les urls des cdn Smiley cligne

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;
    }
Administrateur
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 Smiley langue
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.
Re,

Alors je regardais un truc justement et il semble qu'infobulle ne soit pas des plus conseillé, et qu'il vaut mieux lui préférer arialabel

https://www.accede-web.com/notices/html-et-css/liens-et-boutons/ne-pas-utiliser-les-attributs-aria-label-et-title-sur-des-liens-ou-boutons-explicites/
https://www.accede-web.com/notices/interface-riche/infobulles-personnalisees/

Du coup pour les infobulles il vaut mieux faire son infobulle sois même, si j'ai bien compris

Et passer par aria-hidden pour ne pas surcharger les doublon

https://a11y-guidelines.orange.com/fr/articles/masquage-accessible/

Si j'ai bien compris, ce n'est pas trop mon domaine ce sujet.
Modifié par uniuc (04 Jun 2023 - 19:51)
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)
ObiJuanKenobi a écrit :
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.

C'est sans doute de loin la meilleure solution.
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.
Prévenir un modérateur
Répondre au sujet
Aller à