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?- adiciono
tooltip.js
awebpack
(instalado via npm) - Então eu faço
import tooltip from 'tooltip.js';
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çãoComo? Por quê? Um pouco de Codepen: https://codepen.io/Sepp/pen/ZowqdM
0
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