鼠标悬停时无法显示工具提示，jQuery1.11

could not show tooltip on mouse over , jquery1.11

本文关键字：工具提示 jQuery1 显示 悬停 鼠标      更新时间：2023-09-26

我的要求是在图像鼠标上显示工具提示。我正在使用 jquery1.11 .但我无法实现它。这是我的小提琴

我想在鼠标悬停在图像上的工具提示上显示下表数据：

<table class="statusRollup" style="position:absolute;">
    <tr><td>tooltip Data1 </td></tr>
    <tr><td>tooltip Data2</td></tr>
</table>

示例代码：

$.widget("ui.tooltip", $.ui.tooltip, {
    options: {
        content: function () {
            return $(this).prop('title');
        }
    }
});
$(function () {
    $('.one').attr('title', $('.statusRollup').remove().html())
    $(document).tooltip();
});

他们有什么建议吗？

谢谢。

你让它工作，你只需要将title=""属性应用于你想要的工具提示的项目。

<td class="sample-two">Row1 
<img class="one" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" 
width="15" height="15" alt="" title="testing"/>

工作 JSFiddle： http://jsfiddle.net/ubKtd/1132/

Row1的IMG说测试。

我也建议访问：http://jqueryui.com/tooltip/

如果您想要在此处评论中提出的问题：

.JS： 

$(function () {
      $(document).tooltip({
          content: function () {
              return $(this).prop('title');
          }
      });
  });
$(function () {
    $('.one').attr('title', $('.statusRollup').remove().html())
    $(document).tooltip();
});

还添加了jQuery UI，因为它不是从我所看到的中添加的：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>

工作 JSFiddle： http://jsfiddle.net/0w9yo8x6/3/* 使用 jQuery 1.11.1 *

相关文章：