Question

首先，这被称为工具提示，还是我在谈论不同的事情？

无论如何，我已经设法获得工具提示工作，如下面的图像链接所示。但弹出的小盒子说“密码”必须超过6个字符＆＃39;我如何定位并击中它并改变风格。到目前为止，我要么无法改变它，要么我正在盘旋的盒子被设计。

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源文件：

.tooltip

现在，您可以为要为其设置样式工具提示的元素添加<input type="password" id="pword" class="tooltip" title="Password must be more than 6 characters long">类（或使用任何其他类型的选择器）：

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

title

jQueryUI将自动获取每个元素的.passwordTooltip { background: #333; color: #fff; }并将其设置为样式化工具提示的内容。如果要更改工具提示的样式，只需创建一个CSS类并按上述方式初始化：

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

csv

演示 - ＆gt;的 https://jsfiddle.net/fsr9d7Le/

Answer 2

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

＆＃13;

(function() {
  "use strict";

  var tooltipDelay = 500;

  document.registerElement("style-tip");
  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("style-tip");
          if (el.hasAttribute("styletip-class")) {
            tip.className = el.getAttribute("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);
    }
  });

})();

＆＃13;

/* 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;
}

＆＃13;

<p title="Normal tooltip&#013;With a linebreak!">Normal tooltip</p>
<p title="A red tooltip." styletip-class="red">Red tooltip</p>

<input type="password" id="pword" title="Password must be more than 6 characters long" placeholder="Input tooltip" styletip-class="op-default">

＆＃13;

这应该作为一个简单的脚本，只是工作＆＃34;。

Answer 3

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

Style-my-tooltips jQuery plugin

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

如何更改工具提示的样式/ CSS？

3 个答案: