javascript - 当鼠标悬停在图像上时在 javascript 上创建弹出消息？

Question

我正在创建一个介绍泰国美食的网站。当我的鼠标位于图像上的任何位置时，我想创建一个消息框。

HTML:

<th><h1>Must-Eats!<h1>
<h2> You cannot say you have been to Thailand if you have not tried these amazing food! </h2>
<p id="food"></p>
<img src="mangorice.jpg"style="width:400px;height:250px;" alt="MANGORICE" title="mangorice"></a>
<img src="icecream.jpg"style="width:400px;height:250px;" alt="ICECREAM" title="icecream"></a>
<img src="cake.jpg"style="width:400px;height:250px;" alt="CAKE" title="cake"></a>
<img src="tomyum.jpg"style="width:400px;height:250px;" alt="TOMYUM" title="tomyum"></a>
<img src="thainoodle.jpg"style="width:400px;height:250px;" alt="PADTHAI" title="padthai"></a>
<img src="mooping.jpg"style="width:400px;height:250px;" alt="MOOPING" title="mooping"></a>
</div>

Answer 1

添加工具提示很简单。

只需包含 JQuery UI 库并使用 JQuery 库添加以下 JQuery。

$(function() {
    $( document ).tooltip();
  });

Working Fiddle