クリックした周辺に特定の要素を出現させるには？

Question

ページ内のある文字や画像など、クリックした際に、そのクリックした対象の近くに別に要素を表示させたいのですが、方法がわからず質問をさせて頂きました。

例えばですが、以下の内容で横長のテーブルで記載があった場合…。

<table>
<tr>
<td>登録カテゴリ</td>
<td>…</td>
<td>…</td>
<td>登録日</td>
<td>…</td>
<td>…</td>
<td>在庫状況</td>
</tr>
…
…
…
</table>


<div id="cat">食品</div>
<div id="date">2021/04/01</div>
<div id="stock">在庫数：200</div>

登録カテゴリは画面左側ですが、在庫状況は画面の右側だとした場合、それぞれをクリックした場合、そのクリックした文字周辺にそれぞれの

<div id="cat">食品</div>　などを表示させたいです。

ただ、行うのはモーダル表示の様に決まった位置（画面中央固定）などではなく、あくまでクリックした対象の近くで他の要素を表示させたいと考えています。
また、そのクリック対象の下に表示させたいコンテンツを準備しスライドやフェードで表示というのでもありません。

何と申しますか、モーダル要素の様に浮いた？感じで、クリックした要素ごとの周辺に表示をさせたいです。

こういった場合には、どういった方法で表示が実現できますでしょうか？
アドバイス頂けますと幸いです、宜しくお願いいたします。

Answer 1

「ツールチップ　クリック」でググると、それっぽい記事が出てきます。

これとかがわかりやすいのではないでしょうか。

「クリックしたらツールチップを表示するスクリプト」のバージョン2を作ってみた

[JS]シンプルながら優れモノ！ホバーやクリックでさまざまなツールチップを表示するスクリプト -DarkTooltip | コリス

Comments

[yukina00235]

有難うございます！
ツールチップというものがあるのですね、とても理想的な感じです。
調べてみたいと思います。感謝申し上げます。