指定 jQuery UI 工具提示 CSS 样式

Question

我在一个基于 ajax 的网站中使用 jquery ui 1.9。

我有以下代码：

This is a <span title="Some warning" class="warning">warning</span> message<br />
This is a <span title="Some info" class="info">info</span> message

即使对于动态内容，使用 jquery ui 工具提示也可以：

$(function() {
    $( document ).tooltip();
});

但我希望每种消息类型都有不同的工具提示样式。例如红色表示警告，蓝色表示信息，它也适用于动态内容。

有什么想法吗？

Answer 1

需要使用toolTipClass属性来指定css类

$(document).ready(function() {
    $( ".warning" ).tooltip({
        tooltipClass: "warning-tooltip"
    });
    $( ".info" ).tooltip({
        tooltipClass: "info-tooltip"
    });  
});

Answer 2

首先，这是有效的代码：

$(function() {
    $('#warning-binder-element').tooltip({
        items: '.warning',
        tooltipClass: 'warning-tooltip',
        content: function () {
            return $(this).prev('.warning-toast').html();
        },
        position: {
            my: "right bottom",
            at: "right top-10"
        }
    });

    $('#info-binder-element').tooltip({
        items: '.info',
        tooltipClass: 'info-tooltip',
        content: function () {
            return $(this).closest('.doo-hicky').next('.info-toast').html();
        },
        position: {
            my: "left bottom",
            at: "left+10 top-10"
        }
    });  
});

以上几点说明：

• .tooltip() 的选择器不是您希望弹出工具提示的项目，它是工具提示对象及其关联事件绑定到的页面元素。
• 如果您尝试将两个工具提示绑定到同一个对象，则只有最后一个会持续存在，因此绑定到 $(document) 将不起作用（这就是为什么我将两个不同的工具提示对象绑定到页面上的两个不同元素)。
• 您可以将工具提示对象绑定到将获得工具提示的项目，但如果您使用类选择器，这可能会导致不良影响。