web-dev-qa-db-ja.com

tooltip.js popper.jsの使用例

JavaScriptにあまり熟達していないため、 tooltip.js のドキュメントはまったく理解できません。なぜ私のような人々のための例が含まれていないのですか？

正しく機能するために、このライブラリをインストールする必要がありますか？

  1. 私は追加します tooltip.jsからwebpack（npm経由でインストール）
  2. それから私はimport tooltip from 'tooltip.js';
  3. じゃあ何？

boostrap のコードを使用しようとしました：

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

しかし、私は実際にbootstrapを使用しないので、エラーは次のとおりです：TypeError：

$（...）。tooltipは関数ではありません

そのサンプルページ にいくつかのサンプルコードがありますが、これは実際には役に立ちません。

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

referenceElementとは？トリガーする要素のクラスですか？

私はこのようなものを想像します：

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

そして、JavaScriptを次のように書きますか???

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

それは確かに機能しません。それはエラーを返します：

TypeError：reference.addEventListenerは関数ではありません

どうやって？どうして？小さなコードペン： https://codepen.io/Sepp/pen/ZowqdM

jquerypopper.js
4
KSPR

ドキュメントに基づいて、このようなツールチップを呼び出す必要があります

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

したがって、[data-toggle = "tooltip"]を使用してすべての要素を作成する場合は、次のようにツールチップjsを呼び出します。

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

以下のコードで試してください：

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