如何更改工具提示的 style/css？

Question

首先，这是否称为工具提示，或者我在谈论一些不同的东西？

无论如何，我已经设法使工具提示正常工作，如下图 link 所示。但是弹出的小框说 'Password must be more than 6 characters' 我如何定位并点击它并更改样式。到目前为止，我要么无法更改它，要么我悬停的框已设置样式。

http://www.tiikoni.com/tis/view/?id=1fb09eb

这是一些代码：

html:

<label for="password">Password </label> <input type="password" id="pword" title="Password must be more than 6 characters long" ><br>

js:

<script>
  $(function() {
    $( document ).tooltip({
        tooltipClass: "passwordTooltip"});
  });
  </script>

css:

[title]:after{
    background: #333;
}

[title]:hover:after{
    background: #333;
}

Answer 1

在我看来，您正在尝试使用一些 jQueryUI 工具提示代码来设置默认弹出窗口标题的样式？如果这样做，则必须包含 jQueryUI 源文件：

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

现在您可以将 .tooltip class（或使用任何其他类型的选择器）添加到您想要为其设置工具提示样式的元素：

<input type="password" id="pword" class="tooltip" title="Password must be more than 6 characters long">

$('.tooltip').tooltip();

jQueryUI 会自动抓取每个元素的 title 并使其成为样式化工具提示的内容。如果要更改工具提示的样式，只需创建一个 CSS class 并按上述方式初始化：

.passwordTooltip {
    background: #333;
    color: #fff;
}

$('.tooltip').tooltip({
   tooltipClass: "passwordTooltip"
});

演示 -> https://jsfiddle.net/fsr9d7Le/

Answer 2

这是一个小 VanillaJS 脚本，用于添加对自定义工具提示样式的支持。它使用事件委托，因此应该收集并正确显示具有 title 属性的动态添加元素。

(function() {
  "use strict";

  var tooltipDelay = 500;
  var timer = null;

  document.body.addEventListener("mouseout", function() {
    window.clearTimeout(timer);
  });

  document.body.addEventListener("mousemove", function(e) {
    var el = e.target;

    if (el != document.body && (el.hasAttribute("title") || el.hasAttribute("data-styletip"))) {
      if (el.title) {
        el["tt-title"] = el.title;
        el["tt-show"] = function(pos) {
          var tip = document.createElement("div");
          tip.classList.add("style-tip");
          
          if (el.hasAttribute("data-styletip-class")) {
            tip.classList.add(el.getAttribute("data-styletip-class"));
          }
          
          tip.innerText = el["tt-title"];
          tip.style.zIndex = 9e9;
          tip.style.pointerEvents = "none";
          tip.style.position = "absolute";
          tip.style.left = pos.x + "px";
          tip.style.top = pos.y + "px";
          
          document.body.appendChild(tip);
          
          el["tt-tip"] = tip;
          this.addEventListener("mouseout", el["tt-destroy"]);
        };
        
        el["tt-destroy"] = function() {
          if (el["tt-tip"]) {
            document.body.removeChild(el["tt-tip"]);
            delete el["tt-tip"];
          }
        };
        
        el.removeAttribute("title");
        el.setAttribute("data-styletip", true);
      }

      clearTimeout(timer);
      timer = window.setTimeout(function() {
        el["tt-destroy"]();
        el["tt-show"]({
          x: e.pageX,
          y: e.pageY
        });
      }, tooltipDelay);
    }
  });

})();

/* These styles get pretty close to the default Windows 7 tooltips */

.style-tip {
  font: 0.8em sans-serif;
  background: linear-gradient(#fff, #eee);
  color: rgba(0, 0, 0, 0.8);
  border-radius: 2px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(0, 0, 0, 0.5);
  padding: 3px 5px;
}

.style-tip.red {
  background: linear-gradient(#fdd, #faa)
}

.style-tip.op-default {
  background: #333;
  color: #eee;
}

<p title="Normal tooltip&#013;With a linebreak!">Normal tooltip</p>
<p title="A red tooltip." data-styletip-class="red">Red tooltip</p>

<input type="password" id="pword" title="Password must be more than 6 characters long" placeholder="Input tooltip" data-styletip-class="op-default">

这应该作为 "just works".

的嵌入式脚本

Answer 3

您可以使用 Style my tool tip plug in...

Style-my-tooltips jQuery plugin

使用简单，甚至可以自定义。

如何更改工具提示的 style/css？

How to change the style/css of a tooltip?

html

javascript

css

jquery

tooltip