web-dev-qa-db-ja.com

HTML、マウスオーバーツールチップを作成する最も簡単な方法は何ですか?

大量の追加のjs参照を使用せずに、HTML、マウスオーバーツールヒントを作成する最も簡単でクリーンな方法は何ですか?

<img id=Pennstate src="/blah" style="cursor:pointer;">

その上にマウスを置き、「We are Pennstate!」という素敵なツールチップを表示します

33
stackoverflow

最も簡単な方法は、ネイティブ HTML title属性 を使用することです。

<img src="https://stackoverflow.com/favicon.ico"
     style="cursor:pointer;"
     title="Stack Overflow">

しかし、さらに必要な場合は、バージョン1.9以降jQuery UIで提供されている tooltip ウィジェットを試してください。

67
Samich

ツールチップがどのように見えるかをあまり気にしない場合は、常に「title」属性を使用できます

6
Jaime Garcia