4

我在基于 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();
});

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

有任何想法吗？

4

2 回答 2

13

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

$(document).ready(function() {
    $( ".warning" ).tooltip({
        tooltipClass: "warning-tooltip"
    });
    $( ".info" ).tooltip({
        tooltipClass: "info-tooltip"
    });  
});
于 2013-03-23T19:10:52.277 回答
7

首先，这是有效的代码：

$(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)将不起作用（这就是为什么我将两个不同的工具提示对象绑定到页面上的两个不同元素的原因）。
  • 您可以将工具提示对象绑定到将获得工具提示的项目，但如果您使用类选择器，这可能会导致不良影响。
于 2013-09-24T19:54:00.657 回答