IT関連

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

投稿日:

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

 

マウスオーバー

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

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

JavaScript

 

HTML

 

クリック

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

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

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

JavaScript

 

HTML

 

スポンサーリンク




スポンサーリンク




-IT関連
-,

執筆者:


comment

Your email address will not be published. Required fields are marked *

関連記事

Windows10で画面が真っ暗になってマウスカーソルだけになる件

私は某企業でシステムエンジニアをやっていますが、最近Windows10の不具合をよく聞きます。 Windows7からWindows10にアップグレードしたものや、新規で買ったものも両方とも。 &nbs …

WindowsからMacに切り替えてお仕事をしよう

会社が私にMacBookProを買ってくれたので早速使おうと思ったけど、ずっと仕事でWindowsを使っていた私にとっては、かなり使いにくい。 といって開かずにいたら、かれこれ半年が経過してしまった。 …

WordPressサイトにBasic認証を追加

WordPressサイトだけってわけじゃないけど、Basic認証を追加する方法。 ディレクトリ構成は、/var/www/cms/wp-adminなどのwpディレクトリファイル群 とする。LAMP環境だ …

AS400/IBMi 便利に思ったこと備忘録

収拾つかなくなりそうな匂いがプンプンしますが、自分のために便利だとおもったことを随時更新していきます。   論理ファイルでフィールドをつなげる CONCAT 物理ファイルで例えば支店コード2 …

WordPressのテーマ pacifyで検索窓が使えない

備忘録やTipsを作るのに、WordPressのテーマでpacifyが見やすいので使用してみた。 Tipsが1つ1つのカードの形で表示されるので見やすく気に入っているが、右上の検索がどうも動かない。 …

Adsense広告




文字で検索

人気記事

なぜだか人気記事

読んでほしい順に