質問: javascriptを使ってマウスオーバーで吹き出しを表示する方法を教えてください。 djangoでhtml上で{{form}}を呼び出して使っているので、javascriptでIDで指定して使える方法を探していますが、見当たりません。 「テストです」にカーソルを当てたら、吹き出しが表示され、「テストの内容です」と表示されるようにしたいです。 ``` ``` 試したこと ``` ``` 結果、何も反応しませんでした。
回答: いろいろ間違ってると思います。 そのソースの通りだと、 HTMLが読み込まれる前にscriptが実行されると document.getElementById("id_test") では何も取得できずエラーになり、 うまくHTMLが読み込まれた後にscriptが実行できたとしても、innerHTMLを使っているので以下のような謎のHTMLになり、見た目にも何も起きていないように見えます。 テストの内容です。 まず「吹き出し」とはどうなればよいことなのかもうちょっと考えたほうが良いと思います。 title属性で title="テストの内容です。" をつければたいていのブラウザはツールチップを出してくれますが、それが期待した動作なのか、もっと違うものを期待しているのか、質問からはわかりませんでした。 もっと違うものの例) https://atomiks.github.io/tippyjs/