自定义 jquery-ui 工具提示答案

【问题标题】：customize jquery-ui tolltip自定义 jquery-ui 工具提示
【发布时间】：2023-03-07 14:14:02
【问题描述】：

我在我的项目中使用 HTML 表格并通过 jquery-ui 显示工具提示。但我想在 mouseenter 和 mouseleave 隐藏时添加“mydiv”作为提示。

  <div id="mydiv">
    <input type="button"  value="Delete"/>
    <input type="button"  value="Edit"/>
</div>

请帮忙

【问题讨论】：

标签： jquery asp.net jquery-ui

【解决方案1】：

可能你需要Jquery qTip

$(this).qtip({
      content: divId // Use the contents of the child myqtip-content element.
      style: 'cream'
   });

（不想使用任何插件的请忽略）

【讨论】：

是的，没关系。所以你可以添加qtip插件。真的很轻量级，减少更多代码行的负担。

【解决方案2】：

演示中有一个非常好的自定义内容示例。

http://jqueryui.com/tooltip/#custom-content

点击view source查看代码并进行相应调整

【讨论】：

【解决方案3】：

试试这个示例代码

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Tooltip - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( document ).tooltip();
  });
  </script>
  <style>
  label {
    display: inline-block;
    width: 5em;
  }
  </style>
</head>
<body>

<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with
<a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
will also style tooltips accordingly.</p>
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p>
<p>Hover the field to see the tooltip.</p>


</body>
</html>

Demo :

More one sample

【讨论】：