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。

[assembly: AssemblyVersion("1.40.103.0")]
[assembly: AssemblyFileVersion("1.40.103.0")]

<强> Working Fiddle

Answer 2

您可以使用工具提示在鼠标上弹出。

Check this

Answer 3

原生解决方案

在鼠标悬停时显示单行文本的最简单方法是使用title属性：

<img src="my_pic.jpg" title="That's me when I was 5!" alt="me at 5">

无论如何，为了更好的格式化和更好的效果，您可以使用jQuery tooltips或Bootstrap

Bootstrap解决方案

在这里，我为bootstrap tooltips和popovers编写了一些示例代码：

http://codepen.io/anon/pen/ZQazKp

不要忘记，为了使用bootstrap的功能，你需要同时包含Bootstrap CSS和JS。

您可以将这些行添加到<head>元素：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

或参考this document了解更多选项。

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

3 个答案:

原生解决方案

Bootstrap解决方案