javascript - 样式化两个 jquery-ui 工具提示

Question

我使用工具提示在网站上显示提示和错误，例如:

<span class="help">
<a title="hint for inputfield" href="javascript:void(0);">?</a>
</span>

<span class="error">
<a title="Please fill out!" href="javascript:void(0);">!!!</a>
</span>

我激活工具提示:

$( document ).tooltip();

如果出现错误，我想用红色边框设置工具提示的样式。我只找到了一种设置工具提示全局样式的方法: https://jqueryui.com/tooltip/#custom-style但是如何在一个页面上使用两种不同样式的工具提示呢？

Answer 1

您可能希望使用 tooltipClass 属性将自定义类添加到错误工具提示。

HTML

<span class="help">
    <a title="hint for inputfield" href="javascript:void(0);">?</a>
</span>

<span class="error">
    <a title="Please fill out!" href="javascript:void(0);">!!!</a>
</span>

CSS

.error-style {
    border: 1px solid red;
}

JavaScript

$(".help").tooltip();
$(".error").tooltip({
    tooltipClass: "error-style"
})

这是我为您设置的 fiddle 。 http://jsfiddle.net/t1h3werd/

希望对您有所帮助。