2014-03-25 55 views
1

我想爲工具提示內容分配div。一種方法是有一個內嵌的div在網站中的例子給出:tooltipster - 將div作爲「內容」使用div中的css更改反映在內容中

$(document).ready(function() { 
    $('#my-tooltip').tooltipster({ 
     content: $('<span><img src="my-image.png" /> <strong>This text is in bold case !</strong></span>') 
    }); 
}); 

但是我要的是有DIV seperately定義如下:

<span id='abc'><span><img src="my-image.png" /> <strong>This text is in bold case !</strong></span></span> 

,然後定義內容

$(document).ready(function() { 
    $('#my-tooltip').tooltipster({ 
     content: $($('#abc').html()) 
    }); 
}); 

我想這樣做的原因是因爲我正在動態地將css更改爲'#abc',並且每次提示器顯示我都希望最近的css被更改爲合併。

感謝

回答

2
$('#my-tooltip').tooltipster({ 
    functionBefore: function(origin,continueTooltip){ 
    origin.tooltipster('content',origin.children().html()); 
    continueTooltip(); 
    } 
}); 

爲我工作是改進版:)

$('#my-tooltip').tooltipster({ 
    functionBefore: function(origin,continueTooltip){ 
    origin.tooltipster('content',origin.next().contents()); 
    continueTooltip(); 
    } 
}); 

這就是再好不過了! :)但請確保您的工具提示內容就在您的選擇器後面.tip緊跟在div#my-tooltip後面,也是它的子節點。

1

除了具有的內容來單獨定義,我想爲是嵌套被點擊的元素內的工具提示內容/徘徊。我發現functionBefore選項適合我。

的標記可能是:

<div id="my-tooltip"> 
    click/hover me to show a tooltip 
    <div class="tip" style="display:none"> 
     tooltip<br>content 
    </div> 
</div> 

而且JS:

$('#my-tooltip').tooltipster({ 
    functionBefore: function(origin,continueTooltip){ 
     origin.tooltipster('content',origin.find('.tip')); 
     continueTooltip(); 
    } 
});