Question

这样做有麻烦，所以我想转向老堆栈来帮助我。 :)我已经拥有了我的桌子，当用户将鼠标悬停在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>

Answer 1

使用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;
}

如何使用JS或JQuery在TD Hover上显示工具提示

1 个答案: