如何更改工具提示的样式/css? [英] How to change the style/css of a tooltip?

问题描述

首先，这被称为工具提示还是我在做一些不同的事情?

first of all is this called a tooltip or am i on about something different?

无论如何，我已经设法使工具提示正常工作，如下面的图片链接所示.但是弹出的小框说密码必须超过 6 个字符"我如何定位并点击它并更改样式.到目前为止，我要么无法更改它，要么我悬停在其上方的框已设置样式.

anyway, i have managed to get a tooltip working as can be seen in the image link below. but the little box that pops up saying 'Password must be more than 6 characters' how do i target and hit this and change the style. so far i have either not been able to change it or the box i am hovering over is styled.

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

推荐答案

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

It seems to me you are trying to style default popup titles with some jQueryUI tooltip code? If you do, you must include the jQueryUI source files :

<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 类(或使用任何其他类型的选择器):

Now you can add a .tooltip class (or use any other kind of selector) to those elements you want to have a styled tooltip for :

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

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

jQueryUI 会自动抓取每个元素的 title 并使其成为样式化工具提示的内容.如果您想更改工具提示的样式，只需创建一个 CSS 类并按上述方式进行初始化:

jQueryUI will automatically grab the title of each element and make it to the content of the styled tooltip. If you want to change the style of the tooltip, simply create a CSS class and initialise as above :

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

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

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

demo -> https://jsfiddle.net/fsr9d7Le/

这篇关于如何更改工具提示的样式/css?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！