悬停在图像上时工具提示弹出文本？答案

【问题标题】：tool tip pop up text when hovering over an image?悬停在图像上时工具提示弹出文本？
【发布时间】：2015-06-25 17:17:38
【问题描述】：

链接应为 1em sans-serif 字体，内边距为 5 和 10 像素，边距为 0 0 1 像素（提示：使用速记属性）；右边框应为 5 像素和颜色#ff1828

b.当用户将鼠标悬停在链接上时，右边框应为白色 5 像素的双倍样式

c。启动时，三个意大利面图像下方不应显示任何文字；使用标签控制悬停时的显示文本弹出；将文本块定位为绝对，上边距为 220 像素，左边距为 550 像素；块的宽度至少应为 180 像素，具体取决于您在研究中找到多少文本；使用 5 像素的填充和 10 像素的边距；文本应该是黑底白字。

我一直在尝试一切，这就是我迄今为止所做的，但没有任何效果。我不太确定我做错了什么？如果有人可以提供帮助，我一定会很感激。到目前为止，这是我的代码：

<!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lab 7-3</title

<style type="text/css">
<!--

#links {font: 1 em sans-serif; padding: 5px 10px; margin: 0px 0px 1px, border-right: 5px color: #ff1828}

div.links:hover {border-right: double 5px; color:white}

<span>
div#sizes a:hover img.large {position: absolute; top: 220px; left: 550px; 
                            width: 180px; border:none; padding: 5px; margin: 10px
                            background-color: #000000; color: #ffffff}

</span>     
-->
</style>                    

</head>

<body>

<img src="sabatinaslogo.jpg" width="735" height="190" alt="Sabatina's logo" />
<p style="font-size: large">Hover over a photo to read about the pasta dish and its nutrition information.</p> 

<div id="links" "demo">
<table style="text-align: center">
    <tr>

    <td>
        <a><img class="picture" src="fettuccine.jpg" width="200" height="200" alt="Fettucine"  title="Ingredients include:enriched durum flours, egg, water, soy lecithin. Nutritional facts: Approximately 200 calories, 3.2% total fat, 12.5% cholesterol, 16.7% protein, 1.7% calcium and 8.3% iron"/>

    </td>

    <td>
        <a><img class="picture" src="lasagna.jpg" width="200" height="200" alt="Lasagna" title=" Ingredients include: ground beef, cheese, enriched pasta and tomato sauce. Nutritional facts: Approx. 377 calories per serving, 13% fiber, approx. 50% protein, and approx. 35% sodium" />
    </td>

    <td>
        <a><img class="picture" src="ravioli.jpg" width="200" height="200" alt="Ravioli" title=" Ingredients include: water, durum wheat semolina, beef, wheat flour, egg, vegetable oil, salt, onion flavoring, tomatoes, sugar, cornflour, herb extracts, salt, garlic salt, spice extracts, black pepper. Nutritional facts: 2.6g of protein, 1.6g of fat, 0.8 g of fiber and 0.3g of sodium" />
    </td>
    </td>
</table>


</div>


</body>
</html>

【问题讨论】：

标签： html tooltip

【解决方案1】：

您尝试过使用<img src='' title='popup' /> 吗？

【讨论】：

是的，如果您只需要一条短信，不介意浏览器提供的默认字体和背景等，这是最简单的方法。

【解决方案2】：

这个问题已经很久没有提出来了，但是为了将来人们在谷歌上搜索这个问题，另一个可能的解决方案是使用 Twitter 的 Bootstrap CSS 平台。见这里：http://getbootstrap.com/javascript/#popovers

您需要实现 JQuery 以及 CSS 文件，但这可以通过添加 2 行代码相对容易地实现（请参阅文件顶部的入门部分）

【讨论】：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" ></script>

【解决方案3】：

你的标题标签没有关闭：p

另外，除了

img.large

试试

img.title

或

.picture.title

这将分别是您的 img 标签选择器或 img 标签的类选择器。

.className 指代任何给定元素的类名，其中后者指代元素的标题属性。

所以试试这个，我还没有测试过，所以不能确定结果，但希望它有帮助：

代替：

div#sizes a:hover img.large

替换为：

img.title **or** .picture.title

祝你好运。

（使用 CSS 作为经验，w3schools 作为参考）

【讨论】：