Question

我正在使用jquery-1.7.2.min.js和jquery-ui.min.js，并希望实现一个工具提示。它开箱即用，但后来我计划自定义一些默认效果，它们似乎无法正常工作。

以下是代码：

 $(function () {
    var temp = $("#tooltipname").attr('title');
    $("#tooltipname").tooltip({
        content: temp,
        position: "top",
        opacity: 0.1,
        effect: 'fade',
        predelay: 3000,
        fadeInSpeed: 3000,
    });
})

奇怪的是内容属性工作正常，你可以看到我为它赋值temp变量值。从HTML span标记的标题值中读取temp的值。然而，其他属性根本不起作用。

在得到你们的帮助之后，我已经玩了一些代码，并决定分享我在jsFiddle中创建的代码。我将展示如何在整个页面上不仅实现一个工具提示，而且实现#tooltipname指定的所有工具提示。此外，代码显示了如何打破线条（多线工具提示），这是不容易实现的。

这是HTML代码：

<br />
<br />
<br />
<span title="my tooltip1 <br> new line" id="tooltipname">Hover me</span>

<span title="my tooltip2 <br> new line" id="tooltipname">Hover me2</span>

这是jQuery代码：

$(document).ready(function () {
    var temp = $("#tooltipname").attr('title');
    $(this).tooltip({
        content: function () {
            return $(this).attr("title");
        },
        position: {
            at: "center bottom",
            my: "center top"
        },
        opacity: 0.1,
        show: {
            effect: 'fadeIn',
            duration: 500,
            delay: 500
        },
    });
});

希望它对JQuery的其他新手有所帮助。

对于那些想要使用此代码的人 - ＆gt; jsFiddle Code

Answer 1

它按预期工作。您的p占据了网页的100％宽度，工具提示位于其顶部和中心。您需要将'#tooltipname'设置为'inline-block'或类似的东西。

根据documentation，您需要设置my和at值。

Fiddle

JQuery Tooltip效果不起作用

1 个答案: