📌  相关文章
📜  jQuery UI Tooltip tooltipClass 选项(1)

📅  最后修改于: 2023-12-03 15:32:10.540000             🧑  作者: Mango

jQuery UI Tooltip tooltipClass 选项介绍

jQuery UI Tooltip 是一个强大的 jQuery 插件，它可以将提示信息显示在网页的任何位置。tooltipClass 是一种选项，它允许您指定 tooltip 的 class 名称，以自定义 tooltip 样式。

语法

使用 tooltipClass 选项的语法如下所示：

$(selector).tooltip({
  tooltipClass: "custom-tooltip"
});
示例

在下面的示例中，我们将使用 tooltipClass 选项来自定义 tooltip 样式：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <style>
    .custom-tooltip {
      background-color: #f7d8bc;
      border: 1px solid #e57d3b;
      color: #333333;
      font-weight: bold;
      padding: 5px;
      font-size: 1.2em;
    }
  </style>

  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <script>
    $(document).ready(function(){
      $("input").tooltip({
        tooltipClass: "custom-tooltip"
      });
    });
  </script>
</head>
<body>

  <p>请将鼠标悬停在文本框上：</p>
  <input type="text" title="这是默认的提示信息。" />

</body>
</html>

效果：

custom-tooltip

结论

-tooltipClass 选项可以让您轻松自定义 tooltip 样式，以适应您的网站或应用程序的需求。

-请注意，tooltipClass 仅适用于 jQuery UI Tooltip 插件中。如果您使用的是其他 tooltip 插件，则可能需要查看相关文档以了解自定义样式的更多信息。