在
执行此操作时遇到麻烦，所以我想我会求助于旧的堆栈来帮助我。 :)我已经有了我的表格，我希望当用户将鼠标悬停在TD上时，为每个TR显示不同的工具提示...因此，假设用户将鼠标悬停在Apple名称，描述或图像上，我希望出现一个工具提示，显示指向Apple网站的链接。
链接到网站： www.thetotempole.ca
.HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Arrays</title>
<style>
#apple2 {
#tbl img {
-webkit-transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
}
#tbl td:hover img {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
td {text-align: center;}
</style>
</head>
<body>
<center><table id="tbl" border="1">
<tr>
<th>Product Name</th>
<th>Product Description</th>
<th>Product Images</th>
</tr>
</table>
<script>
var products = [
{
name: "Apple",
description: "It might be fruit, or it might be an iPhone",
imageUrl: "images/apple.jpg"
}, {
name: "Dell",
description: "Buy this one online at dell.com",
imageUrl: "images/dell.jpg"
}, {
name: "IBM",
description: "If you want a mainframe they still have some",
imageUrl: "images/ibm.jpg"
}, {
name: "Toshiba",
description: "Get a discount through SAIT (maybe)",
imageUrl: "images/toshiba.jpg"
}, {
name: "Atari",
description: "Try a classic gaming machine",
imageUrl: "images/atari.jpg"
}, {
name: "Commodore",
description: "64k should be enough for anyone",
imageUrl: "images/commodore.jpg"
}
];
var table = document.getElementById("tbl");
products.forEach(function(product) {
var row = document.createElement("tr");
row.appendChild(createCell(product.name));
row.appendChild(createCell(product.description));
row.appendChild(createImageCell(product.imageUrl));
table.appendChild(row);
});
function createCell(text) {
var cell = document.createElement("td");
cell.innerText = text;
return cell;
}
function createImageCell(url) {
var image = document.createElement("img");
image.setAttribute("src", url);
var cell = document.createElement("td");
cell.appendChild(image);
return cell;
}
</script>
</center>
</body>
</html>
这可以使用jQueryUI的工具提示功能轻松完成...
您所需要的只是在文档<head>中包含jQuery和jQueryUI：
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
</head>
然后，初始化工具提示：
<script type="text/javascript">
$(document).ready(function() {
$( document ).tooltip();
}); //END $(document).ready()
</script>
最后，向要显示工具提示的元素添加一个title="Text for tooltip"：
<a href="#" title="http://apple.ca">Visit the Apple store</a>
为了匹配您的代码，您应该能够执行以下操作：
function createCell(text) {
var cell = document.createElement("td");
cell.innerText = text;
cell.setAttribute("title", "This will be the tooltip for this TD");
return cell;
}
或
function createImageCell(url) {
var image = document.createElement("img");
image.setAttribute("src", url);
image.setAttribute("title", "This will be the tooltip for this image");
var cell = document.createElement("td");
cell.appendChild(image);
return cell;
}