如何使用jQuery UI Tooltip更改打开时的工具提示颜色？

Question

如何使用jQuery UI Tooltip更改打开时的工具提示颜色？

7

我想实现以下功能，但不知道如何做。页面上有几个工具提示，但我希望每个工具提示看起来都不同（取决于严重程度）。这是我目前的代码：

<div id="container">
<a href="#" title="Tooltip 1" data-severity="warning">Tooltip 1 (Warning)</a>
<a href="#" title="Tooltip 2" data-severity="danger">Tooltip 2 (Danger)</a>
</div>

<script type="text/javascript">
// init tooltip
ArrowToolTip.init('container');
</script>

/*JAVASCRIPT*/
var ArrowToolTip = {
init: function (parentId) {
    jQuery('#' + parentId).tooltip(
    {
        content: function () {
            var element = jQuery(this);
            return element.attr('title');
        },
        create: function () {
            var element = jQuery(this);

            var severity = element.data('severity');

            if (!severity) {
                severity = 'default';
            }

            element.tooltip('option', 'tooltipClass', severity);
        },
        open: function(event, ui) {
            var element = jQuery(this);
            var severity = element.data('severity');
            ui.tooltip({
                tooltipClass: severity 
            });
            //ui.tooltip.tooltipClass(severity);
            console.log(event);
            console.log(ui);
        }
    });
}
}

我在 create: 中的所有内容都能正常工作，但它只在页面加载时被调用，所以对我没有任何帮助。因此，现在我正在尝试将其移动到 open: 事件中。但是这似乎根本不起作用。 jQuery(this) 并未返回鼠标悬停的元素，而是返回了容器。如何获取正确的元素以选择数据属性？然后如何更改 CSS 类？有谁知道如何实现这一点吗？

- 5earch

尝试使用 var element = ui.tooltip;。 - mccannf

2个回答

1

我不清楚你的问题。但我希望这会有所帮助...

我在jquery中使用“tooltipclass”作为工具提示类名。

$(document).tooltip({effect: "blind", duration: 1000, tooltipClass: 'tooltipclass'});

使用该类名，您可以为工具提示添加任何样式。

.tooltipclass{
    font-size: 12px;
    border:1px solid #e74c3c;
}

因此，请尝试使用不同的tooltipClass名称......

- dennypanther

谢谢你的回答。不过这并不是我想要的。我想要在鼠标悬停时更改每个工具提示的颜色，而不仅仅是最初设置所有工具提示的相同颜色。 - 5earch

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- brasofilo · Accepted Answer

我并没有完全理解你的逻辑，但是这里是我根据 data-severity 实现不同类别的方法。与其将 .tooltip() 应用于所有元素，不如通过迭代它们并将 tooltipClass 设置为 $(this).data('severity')。内容函数还可以添加一个类。

$('a.tips').each(function () {
    var severity = $(this).data('severity');
    $(this).tooltip({
        content: function () {
            return '<em>' + $(this).attr('title') + '</em>';
        },
        tooltipClass: severity,
        show: "slideDown",
        open: function (event, ui) {
            ui.tooltip.hover(function () {
                $(this).fadeTo("slow", 0.5);
            });
        }
    });
});

.ui-tooltip {
    padding: 10px 20px;
    border-radius: 20px;
    font: bold 14px"Helvetica Neue", Sans-Serif;
    text-transform: uppercase;
    box-shadow: 0 0 7px black;
}
.ui-tooltip.warning {
    color: #E3E8F7;
    background: #D94AA4;
}
.ui-tooltip.danger {
    color: #212942;
    background: #CABA75;
}
a.tips { float:left; margin: 0 10px; text-decoration:none; font: Sans-Serif; }
body { background-color:#eee; padding: 30px; }

<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/css/jquery.ui.tooltip.min.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<div id="container">
<a href="#" title="Tooltip 1" class="tips" data-severity="warning">(Warning)</a>
<a href="#" title="Tooltip 2" class="tips" data-severity="danger">(Danger)</a>
</div>