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)都不起作用（这就是为什么我将两个不同的工具提示对象绑定到两个不同的元素上页面）。
您可以将工具提示对象绑定到将获得工具提示的项目，但如果您使用类选择器，则可能会导致不良影响。

指定jQuery UI Tooltip CSS样式

2 个答案: