Comment ajouter des balises html dans l'attribut title d'un élément ?

Par Mimason', il y a 3 ans

Les bases HTML/CSS
Javascript

Bonjour,

J'ai envie d'ajouter les balises html dans l'attribut "title" d'un élément. Pour le moment, quand on affiche le tooltip, les balises html s'affichent aussi dans le tooltip.

<a href="" data-bs-toggle="tooltip" title="<b>Bonjour</b>">Tooltip</a> $(function () { $('[data-toggle="tooltip"]').tooltip() })

Est-ce qu'il est possible s'il vous plait? Aidez-moi mes amis !!!

6 réponses

popotte, il y a 3 ans

Hello, impossible de mettre du HTML dans l'attribut titlt, il faut que tu créées ton propre élément que tu fait apparaitre en hover :p

Tu peux utiliser des div relatives avec un ::before ou ::after en absolute qui apparait en hover, ou alors plus simple il y a des paquages JS qui proposent une solution (je crois que jQuery a une solution mais je ne conais plus les features de jQuery)

Mimason', il y a 3 ans

Merci mais j'ai fait la recherche c'est possible comme il est indiqué sur le code suivant:

<a style="cursor:pointer" data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="auto" data-bs-boundary="window" title="<b>Bonjour</b>">Tooltip</a> <script> var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl) }) </script>
popotte, il y a 3 ans

Ah oui je disais juste que c'était impossible en native x)

Par contre je ne savais pas que Bootstrap aussi proposait un paquet JS pour le faire, bon à savoir :o

Soundboy39, il y a 3 ans

Hello,

À une époque j'utilisais ce plugin jQuery : https://github.com/calebjacob/tooltipster

Il est assez puissant car il permet non seulement de faire des tooltips avec du HTML, mais en plus il gère aussi d'autres évenements et permet l'utilisation de callbacks.

Petit bémole potentiel : il necessite l'utilisation de jQuery.

LandryBoy, il y a 3 ans

cool c'eest du beau travail

Orivoir21, il y a 3 ans

Bonjour, juste à titre informatif la librairie poper.js permet de générer toute sorte de tooltip/popover.
L'avantage que ça peut avoir par apport à une librarie comme jQuery où Bootstrap, c'est que poper.js ne sert que à faire ça,
tu n'importes pas une tonne de code additionel que tu vas (peut-être) pas utiliser dans le reste de l'application.
Il me semble d'ailleurs qu Bootstrap fait fonctionner c'est tooltip en utilisant poper.js car on peut le voir sur le Getting Started de bootstrap
dans la partie installation:

<!-- jQuery --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <!-- Poper.js --> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <!-- Twitter Bootstrap --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Que poper.js fait partie des script dépendances de Bootstrap.