1. ホーム
  2. javascript

[解決済み] divにツールチップを追加する

2022-03-15 10:21:38

質問

このようなdivタグがあります。

<div>
  <label>Name</label>
  <input type="text"/>
</div>

にツールチップを表示させるには? :hover できればフェードイン/アウトの効果があるとよい。

解決方法は?

基本的なツールチップは、以下のようにします。

<div title="This is my tooltip">

のようなものです。

.visible {
  height: 3em;
  width: 10em;
  background: yellow;
}
<div title="This is my tooltip" class="visible"></div>

よりファンシーなjavascriptのバージョンは、あなたが見ることができます。

https://jqueryhouse.com/best-jquery-tooltip-plugins/

上記のリンク先では、ツールチップのオプションが25個用意されています。