javascriptについてです。
添付画像はchromeのデベロッパーツールを使っているときの画面の一部ですが、
右上の四角のアイコンをクリックし、カーソルをページ内の要素上に合わせると、
要素の上に、要素と同サイズの半透明の要素？を表示し、
要素のサイズやclassなどをツールチップで表示します。
これと同じ事をjavascriptでしたいのですが、
参考になるサイトはありませんでしょうか。
できれば、jqueryを使わないタイプが良いのですが、
無ければ、jqueryを使うタイプでも構いません。
宜しくお願い致します。
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。
ログインして回答する
みんなの回答
-
Cherenkov
tooltipというキーワードでライブラリを検索すればいろいろ見つかります。
jqueryに依存しないのはこれとか
Tippy.js - Vanilla JS Tooltip and Popover Library https://atomiks.github.io/tippyjs/
【JavaScript】ツールチップを表示させる超軽量ライブラリ［Tippy.js］の使い方 - ONZE http://on-ze.com/archives/7310 -
-
worldtravel
わかりにくくて申し訳ありません。
添付画像の場合ですと、「メール」の上にカーソルを合わせていますが、
そのとき、
「メール」の上に、透過された青いオーバーレイが表示され、
「メール」の要素のタグ名、サイズなどがツールチップで表示されます。
もちろん、最初にidなどを付けておき、
そこにマウスオーバーしたときだけに表示したいわけではありません。
chromeの機能拡張にに組み込む予定で、
どのページでもどの要素でも機能するようにすることが目的です。
この質問へのコメント
質問の情報
- 登録日時
- 2018-03-20 21:43:49
- 終了日時
- 2018-03-27 21:45:06
- 回答条件
- 1人1回まで
この質問のカテゴリ
この質問に含まれるキーワード
人気の質問
-
この英文どうなってますか？ The boy seemed to be waiting for his mother to come.（その少年は母親が来…
匿名質問者
1
1
-
不定詞の形容詞的用法らしいんですけど、副詞的用法と書いたら✖️ですか？ I want to buy a book to read …匿名質問者11
-
日向陽葵という○V女優が好きなのですが似ている○V女優はいますか匿名質問者
-
共通テストで使われるプログラミング言語は共通テスト特有の言語と聞いたのですが、受験勉強で身につけたプ…匿名質問者1
-
内定してほしいポケモンはいますか？匿名質問者
ありがとうございました。
・document の onmousemove にリスナーを登録
・リスナーで、イベントの clientX/Y から document.elementFromPoint でカーソル位置にある要素を取得
・その要素から
・欲しい情報を抜き出して表示
・同じ位置に、半透明の要素をかぶせる
ページやブラウザのバージョンによって document.documentElement.scrollTop が常に 0 を返す場合があるので、document.scrollingElement を使うと吉。
iframe 内の要素に追従するのが難しい。
document が変わるし、位置も足さなきゃいけない。
三重、四重とか考えたくない。
iframe は良いんだけど、frame の対応が大変。
::after とかの疑似要素を取得するには、なんかスペシャルな方法が要るはず（知らない）。
私は、document.getElementsByTagName('*') で取得した全てに
mouseover でツールチップとオーバーレイを表示するようにしました。
表示内容は mouseout で削除しています。
かなり、効率悪いですかね、、、苦笑
親の要素まで同時に動いてしまうので、困っていたのですが、
event.stopPropagation(); という存在を見つけて解決しました。
要素のサイズは、offsetWidth、offsetHeightで取得し、
位置は、offsetTop、offsetLeftで取得しました。
今のところ、問題なさそうです。
iframe、frameは、現時点での自分の目的には必要ではないので考えておりませんでした。
必要なときが来ましたら、ご相談させて頂きます。
まだまだ改善しなければならない点があり、もう少し頑張ってみます。
ありがとうございました。
＞位置は、offsetTop、offsetLeftで取得しました。
親の要素に position: relative とかが指定されているときとか、offsetParent が document.body じゃないときには、位置は上に向かって足し算していかなきゃならないです。
border とか box-sizing の考慮も必要です。
なので、Element.getBoundingClientRect() を使うのが簡単です。
つい最近も、はまりました :-)
→ http://a-kuma3.hatenablog.com/entry/trap_of_offsetLeft
ツールチップやオーバーレイは、最初該当する要素の子要素として生成していたのですが、
imgやinputなど思い通りにするのが大変で悩んでいたのですが、
body直下に生成し、常にページ左上からの位置で表示するようにし、思い通りになりました。
現在は色々なページで試しており、これから不具合が出るかもしれませんが、、、
表示する位置は、教えて頂いた Element.getBoundingClientRect() の値と、
window.pageXOffset、window.pageYOffset を足した値を使用してます。
カーソルが外れた時点でツールチップなどは消しているので、
特に問題なさそうな気はするのですが、、、