Dica.js popper.exemplo de Utilização do js

Como não sou muito proficiente em javascript, não entendo a dica .documentação js de todo. Por que não incluir um exemplo para pessoas como eu?

Tenho de instalar esta biblioteca para funcionar correctamente?

  1. adiciono tooltip.js a webpack (instalado via npm)
  2. Então eu faço import tooltip from 'tooltip.js';
    3. E depois?

tentei usar o código de boostrap :

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

Mas eu não uso presilha, por isso ... o erro é: TypeError:

$(...).tooltip não é uma função

existe um código de exemplo na sua página de exemplo que realmente não ajuda: 

new Tooltip(referenceElement, {
    placement: 'top', // or bottom, left, right, and variations
    title: "Top"
});
O que é isso? É a classe do elemento que Eu desejo desencadear?

Imagino algo assim: 
<p title="xyz" data-toggle="tooltip">hello</p>
E depois escrever o javascript assim???

new Tooltip('[data-toggle="tooltip"]', {
    placement: 'top',
    trigger: 'hover'
});
Isso certamente não funciona. Devolve o erro:

Erro do tipo: referência.addEventListener não é uma função

Como? Por quê? Um pouco de Codepen: https://codepen.io/Sepp/pen/ZowqdM

Author: KSPR, 2018-05-21
Source

2 answers

Com base na documentação, você deve chamar dicas como esta 

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

Por isso, se quiser fazer todos os elementos com [data-toggle="tooltip"] call tooltips js, poderá fazer o seguinte: 

$( document ).ready(function() {
  $( '[data-toggle="tooltip"]' ).each(function() {
    new Tooltip($(this), {
      placement: 'top',
    });
  });
});
 0
Author: reza_daulay, 2018-05-21 10:56:30

Tente com o código abaixo: 

   <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>

<script>

	document.addEventListener('DOMContentLoaded',function(){
  var trigger = document.getElementsByClassName("is-success")[0];
  var instance = new Tooltip(trigger,{
    title: trigger.getAttribute('data-tooltip'),
    trigger: "hover",
  });
});
	</script>
<button class="button is-success" data-tooltip="Click Here">Hover Me</button>
 0
Author: Ankita, 2018-05-21 11:24:17