奇怪的是,我发现很难将 jquery 的 onclick 事件处理程序绑定到这个小提琴。我什至不知道我做错了什么。html如下:-
<ul>
<li><a id="tooltip_1" href="#" class="tooltip" >Trigger1</a><li>
<li><a id="tooltip_2" href="#" class="tooltip" >Trigger2</a><li>
<li><a id="tooltip_3" href="#" class="tooltip" >Trigger3</a><li>
</ul>
<div style="display: none;">
<div id="data_tooltip_1">
data_tooltip_1: You can hover over and interacte with me
</div>
<div id="data_tooltip_2">
data_tooltip_2: You can hover over and interacte with me
</div>
<div id="data_tooltip_3">
data_tooltip_3: You can hover over and interacte with me
</div>
</div>
以这种方式设计:-
li {
padding: 20px 0px 0px 20px;
}
使用这样的 jquery:-
$(document).ready(function() {
$('.tooltip[id^="tooltip_"]').each
(function(){
$(this).qtip({
content: $('#data_' + $(this).attr('id')),
show: {
},
hide: {
fixed: true,
delay: 180
}
});
});
});
你看看我创建的小提琴页面:-http://jsfiddle.net/UyZnb/339/.
同样,我如何实现类似 jquery 模式的外观,以便工具提示成为焦点?