web-dev-qa-db-fra.com

Exemple d'utilisation de tooltip.js popper.js

Comme je ne suis pas très compétent en javascript, je ne comprends pas du tout la documentation tooltip.js . Pourquoi ne pas inclure d'exemple pour des gens comme moi?

Comment dois-je installer cette bibliothèque pour fonctionner correctement?

  1. J'ajoute tooltip.js à webpack (installé via npm)
  2. Alors je fais import tooltip from 'tooltip.js';
  3. Alors quoi?

J'ai essayé d'utiliser le code de boostrap :

<p data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</p>
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

Mais je n'utilise pas réellement bootstrap donc l'erreur est: TypeError:

$ (...). l'infobulle n'est pas une fonction

Il y a un exemple de code sur leur page d'exemple qui n'aide pas vraiment:

new Tooltip(referenceElement, {
    placement: 'top', // or bottom, left, right, and variations
    title: "Top"
});

Qu'est-ce que referenceElement? Est-ce la classe de l'élément que je souhaite déclencher?

J'imagine quelque chose comme ça:

<p title="xyz" data-toggle="tooltip">hello</p>

Et puis écrivez le javascript un peu comme ça ???

new Tooltip('[data-toggle="tooltip"]', {
    placement: 'top',
    trigger: 'hover'
});

Cela ne fonctionne certainement pas. Il renvoie l'erreur:

TypeError: reference.addEventListener n'est pas une fonction

Comment? Pourquoi? Un peu de Codepen: https://codepen.io/Sepp/pen/ZowqdM

jquerypopper.js
4
KSPR

Sur la base de la documentation, vous devez appeler des info-bulles comme celle-ci

new Tooltip(referenceElement, {
    placement: 'top', // or bottom, left, right, and variations
    title: "Top"
});

donc, si vous voulez créer tous les éléments avec [data-toggle = "tooltip"] appelez tooltips js, vous pouvez faire comme ceci:

$( document ).ready(function() {
  $( '[data-toggle="tooltip"]' ).each(function() {
    new Tooltip($(this), {
      placement: 'top',
    });
  });
});
1
reza_daulay

Essayez avec le code ci-dessous:

document.addEventListener('DOMContentLoaded',function(){
    var trigger = document.getElementsByClassName("is-success")[0];
    var instance = new Tooltip(trigger,{
        title: trigger.getAttribute('data-tooltip'),
        trigger: "hover",
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/popper.js"></script>
<script src="https://unpkg.com/tooltip.js"></script>
<button class="button is-success" data-tooltip="Click Here">Hover Me</button>
1
Ankita