如何在点击时显示工具提示
我正在尝试使用qtip2 。 我的问题是，我只想在用户点击内部指定html的href时显示工具提示。 所以我试试这个：
function help(){ var link = document.getElementById('helps'); if(link.innerHTML=="Open"){ $('#helps').qtip({ content: { text: 'I get shown on click' }, show: { event: 'click' } }); link.innerHTML = "Close"; }else{ link.innerHTML="Open"; } } Open
我的问题是，当我单击时，文本变为Close但工具提示不显示。 当我再次单击时，文本变为Open ，我看到工具提示。 我能做什么？
您应该在onclick处理程序之前初始化qtip 。
$('#helps').qtip({ content: { text: 'I get shown on click' }, show: { event: 'click' } }); function help() { var link = document.getElementById('helps'); if (link.innerHTML == "Open") { link.innerHTML = "Close"; } else { link.innerHTML = "Open"; } } < a href = "javascript:help()" id = "helps" > Open < /a>
我这样做：
JS代码：
$(function(){ $('#helps').qtip({ content: { text: 'I get shown on click' }, show: { event: 'click' }, hide: { event: 'click' } }).click(function() { var _$this = $(this); if(_$this.html() === 'Open') { _$this.html('Close'); } else { _$this.html('Open'); } }) });
HTML一：
Open
编辑：隐藏外部点击工具提示：
$(function(){ $(this).click(function(e) { var _$elm = $(e.target); if(_$elm.attr('id') !== 'helps') { $('#helps').qtip('hide'); } return false; }); $('#helps').click(function() { var _$this = $(this); if(_$this.html() === 'Open') { _$this.html('Close').qtip('enable'); } else { _$this.html('Open').qtip('disable').qtip('hide'); } }).qtip({ content: { text: 'I get shown on click' }, show: { event: 'click', when: { target: $('#helps:contains("Open")') } }, hide: { event: 'click', when: { target: $('#helps:contains("Close")') } } }); });
你应该做
$('#helps').qtip({ content: { text: 'I get shown on click' }, show: { event: 'click', target: $('#helps:contains("Open")') } }); $('#helps').click(function() { if (this.innerHTML=="Open") { this.innerHTML = "Close"; } else { this.innerHTML="Open"; } }); Open
您的代码无效，因为您在第一次点击时创建了qTip！ 您应该使用qTip的目标选项，以便仅当您的元素包含文本“打开”时才显示提示
甚至更好，为所有JS脚本使用jQuery：
$(function(){ $('a.tooltip').qtip( { content: 'Some basic content for the tooltip!', api:{ onShow: function(){ $('a.tooltip').html('Close'); }, onHide: function(){ $('a.tooltip').html('Open'); } }, show: { when: { event: "click" } } }); }); Click me!!
我认为你可以使用：
$（’＃helps’）。qtip（{content：{text：’我在点击时显示}};
是拥有经典工具提示的最佳方式..