样式化两个 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 属性.

将自定义 class 添加到您的错误工具提示

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/

希望对您有所帮助。

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

styling two jquery-ui tooltips

javascript

css

jquery-ui

jquery-tooltip