Question

我无法使用工具提示处理附加元素。

小提琴在这里：http://jsfiddle.net + jeffz2012 / 4xwM9 / 8 /（无法使此链接起作用）

代码在这里：


//css:
//---------
.mrg {
    margin: 15px;
}
.hand {
    cursor: pointer;
}
.help {
    cursor: help;
}
.brd {
    padding:7px;
    border: solid 1px #ccc;
}



//html:
//---------
<div class="mrg tip brd help" title="I am a regular tooltip">point mouse here for non appended tooltip</div>
<div id="trig" class="mrg hand brd">now click here, to append another div</div>
<div id="rec" class="mrg" title="I am appended tooltip, but I do not work"></div>



//jquery
//---------
$('#trig').on('click', function() {
    $('#rec').append('<div class="help brd tip">this is appended element and should show tooltip on hover</div>');
});

$( '.tip' ).tooltip({
    open: function( event, ui ) {
        ui.tooltip.animate({
            top: ui.tooltip.position().top + 10
        }, "fast" );
    },
    position: {
        my: "center botto", 
        at: "center top+10",
        collision: "flipfit"
    }

});

Answer 1

如果我找对你，这就是解决方案：

http://jsfiddle.net/4xwM9/9/

您必须初始化附加div的工具提示。

$('#trig').on('click', function() {
    var $addedTooltip = $('<div class="help brd tip">this is appended element and should show tooltip on hover</div>');

    $('#rec').append($addedTooltip);

    $addedTooltip.tooltip();    
});

Answer 2

转到第17行的jQuery.tipsy.js文件更改： false ， true

关于附加元素的jquery ui工具提示 - 包括小提琴

2 个答案: