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

IT関連

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

 

マウスオーバー

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

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

JavaScript

 

HTML

 

クリック

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

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

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

JavaScript

 

HTML

 

コメント

タイトルとURLをコピーしました