解释

Question

我确定这是一个简单的问题..我已经浪费了太多时间了

我有以下图片：

 <img src="/_/img/icons/103-map.png" alt="Find Me" title="come and find me..." class="action findMe_map"/>

以下javascript使用1.2.6 jQuery工具：

 <script>
    $(document).ready(function() {

    // create custom animation algorithm for jQuery called "bouncy"
    $.easing.bouncy = function (x, t, b, c, d) {
        var s = 1.70158;
        if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
        return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
    }

    // create custom tooltip effect for jQuery Tooltip
    $.tools.tooltip.addEffect("bouncy",

        // opening animation
        function(done) {
            this.getTip().animate({top: '+=15'}, 500, 'bouncy', done).show();
        },

        // closing animation
        function(done) {
            this.getTip().animate({top: '-=15'}, 500, 'bouncy', function()  {
                $(this).hide();
                done.call();
            });
        }
    );

    $('img.findMe_map').click(function() {
        event.preventDefault();
        console.log(this);
        $('img[title]').tooltip({effect: 'bouncy'});
    });
 </script>

当我使用上面的代码时，标题从console.log(this);输出中消失，工具提示不会显示我正在尝试解决的问题
< / LI>
当我在click()中注释掉工具提示行并单击图像时，“来找我......”会出现在控制台中。

混淆。

Answer 1

解释

初始化时，所有内容都在工具提示选项中进行了配置。

$("#demo img[title]").tooltip({
    effect: 'bouncy',
    tipClass: 'foo',
    ...
});

事件不会以您习惯的方式进行控制它们实际上是在初始化工具提示时配置的：

$("#demo img[title]").tooltip({
    effect: 'bouncy',
    events:{...}
});

您可以详细了解here。

我猜你在点击它时想让它反弹，就像here一样。

解决方案

Here's a working solution on JSFiddle有3个不同的例子，说明如何使用事件 ..尽管它看起来并不像在他们的网站上那么酷，但它展示了它是如何工作的！

// create custom animation algorithm for jQuery called "bouncy"
$.easing.bouncy = function (x, t, b, c, d) {
    var s = 1.70158;
    if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
    return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}

// create custom tooltip effect for jQuery Tooltip
$.tools.tooltip.addEffect("bouncy",

    // opening animation
    function(done) {
        this.getTip().animate({top: '+=15'}, 500, 'bouncy', done).show();
    },

    // closing animation
    function(done) {
        this.getTip().animate({top: '-=15'}, 500, 'bouncy', function()  {
            $(this).hide();
            done.call();
        });
    }
);

//Manage all the settings here, and only do it once
$("img.findMe_map").tooltip({
    effect: 'bouncy',
    events: {
        def: "click, mouseout", // default show/hide events for an element
    }
});

文档

可以找到所有文档here。

快乐的编码！：）

jQuery工具提示使href标题消失

1 个答案:

解释

解决方案

文档