Bootstrap4でツールチップ Tooltip ポップアップ

自分の備忘録です。間違えはご容赦ください。

マウスオーバー

要素をマウスオーバーすると、マウスオーバーした要素の上にポップアップをふわっと表示する。

• カスタムデータ属性placement（表示したい場所上下左右 ）
• カスタムデータ属性data-toggle（決まり文句でtooltip ）
• title属性（表示したい文字 ）

JavaScript

$(function(){
  $('[data-toggle="tooltip"]').tooltip();
});

HTML

<span data-toggle="tooltip" data-placement="top" title="表示したい文字">もとの文字</span>

クリック

クリックすると表示して、ずっと表示したままキープ。

別の箇所をクリックすると消える。

• カスタムデータ属性data-placement（表示したい場所上下左右 ）
• カスタムデータ属性data-toggle（決まり文句でpopover）
• カスタムデータ属性data-content（表示したい文字 ）

JavaScript

$(function(){
  $('[data-toggle="popover"]').popover({trigger:'focus'});
});

HTML

<input type="text" name="tr" data-toggle="popover" data-placement="top" data-content="表示したい文字">