将鼠标悬停事件更改为工具提示的 Onclick 事件
Change MouseHover event to Onclick event for Tooltip
我在鼠标悬停上有一个用于工具提示的 JS,
我应该更改什么才能在此JS中将鼠标悬停转换为onclick事件。
我尝试更换一些,但没有工作!这是下面的JS。但它没有用,而是显示错误。
可以完成还是需要更改所有代码!
var htmltooltip={
tipclass: 'htmltooltip',
fadeeffect: [true, 500],
anchors: [],
tooltips: [], //array to contain references to all tooltip DIVs on the page
positiontip:function($, tipindex, e){
var anchor=this.anchors[tipindex]
var tooltip=this.tooltips[tipindex]
var scrollLeft=window.pageXOffset? window.pageXOffset : this.iebody.scrollLeft
var scrollTop=window.pageYOffset? window.pageYOffset : this.iebody.scrollTop
var docwidth=(window.innerWidth)? window.innerWidth-15 : htmltooltip.iebody.clientWidth-15
var docheight=(window.innerHeight)? window.innerHeight-18 : htmltooltip.iebody.clientHeight-15
var tipx=anchor.dimensions.offsetx
var tipy=anchor.dimensions.offsety+anchor.dimensions.h
tipx=(tipx+tooltip.dimensions.w-scrollLeft>docwidth)? tipx-tooltip.dimensions.w : tipx //account for right edge
tipy=(tipy+tooltip.dimensions.h-scrollTop>docheight)? tipy-tooltip.dimensions.h-anchor.dimensions.h : tipy //account for bottom edge
$(tooltip).css({left: tipx, top: tipy})
},
showtip:function($, tipindex, e){
var tooltip=this.tooltips[tipindex]
if (this.fadeeffect[0])
$(tooltip).hide().fadeIn(this.fadeeffect[1])
else
$(tooltip).show()
},
hidetip:function($, tipindex, e){
var tooltip=this.tooltips[tipindex]
if (this.fadeeffect[0])
$(tooltip).fadeOut(this.fadeeffect[1])
else
$(tooltip).hide()
},
updateanchordimensions:function($){
var $anchors=$('*[@rel="'+htmltooltip.tipclass+'"]')
$anchors.each(function(index){
this.dimensions={w:this.offsetWidth, h:this.offsetHeight, offsetx:$(this).offset().left, offsety:$(this).offset().top}
})
},
render:function(){
jQuery(document).ready(function($){
htmltooltip.iebody=(document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
var $anchors=$('*[@rel="'+htmltooltip.tipclass+'"]')
var $tooltips=$('div[@class="'+htmltooltip.tipclass+'"]')
$anchors.each(function(index){ //find all links with "title=htmltooltip" declaration
this.dimensions={w:this.offsetWidth, h:this.offsetHeight, offsetx:$(this).offset().left, offsety:$(this).offset().top} //store anchor dimensions
this.tippos=index+' pos' //store index of corresponding tooltip
var tooltip=$tooltips.eq(index).get(0) //ref corresponding tooltip
if (tooltip==null) //if no corresponding tooltip found
return //exist
tooltip.dimensions={w:tooltip.offsetWidth, h:tooltip.offsetHeight}
$(tooltip).remove().appendTo('body') //add tooltip to end of BODY for easier positioning
htmltooltip.tooltips.push(tooltip) //store reference to each tooltip
htmltooltip.anchors.push(this) //store reference to each anchor
var $anchor=$(this)
$anchor.hover(
function(e){ //onMouseover element
htmltooltip.positiontip($, parseInt(this.tippos), e)
htmltooltip.showtip($, parseInt(this.tippos), e)
},
function(e){ //onMouseout element
htmltooltip.hidetip($, parseInt(this.tippos), e)
}
)
$(window).bind("resize", function(){htmltooltip.updateanchordimensions($)})
})
})
}
}
htmltooltip.render()
如我所见(尚未尝试过),您只需要替换
$anchor.hover(
function(e){ //onMouseover element
htmltooltip.positiontip($, parseInt(this.tippos), e)
htmltooltip.showtip($, parseInt(this.tippos), e)
},
function(e){ //onMouseout element
htmltooltip.hidetip($, parseInt(this.tippos), e)
}
)
跟
$anchor.click(
function(e){ //onMouseover element
htmltooltip.positiontip($, parseInt(this.tippos), e)
htmltooltip.showtip($, parseInt(this.tippos), e)
}
)
但是您必须在工具提示中添加"关闭"按钮才能再次隐藏它。或您想要的任何其他解决方案/行为。
更新:
您可以尝试设置工具提示的"onclick"处理程序。可能看起来像:
showtip:function($, tipindex, e){
var tooltip=this.tooltips[tipindex]
if (this.fadeeffect[0])
$(tooltip).hide().fadeIn(this.fadeeffect[1])
else
$(tooltip).show()
$(tooltip).bind('click',
function(e)
{
htmltooltip.hidetip($, tipindex, e);
}
);
},
hidetip:function($, tipindex, e){
var tooltip=this.tooltips[tipindex]
if (this.fadeeffect[0])
$(tooltip).fadeOut(this.fadeeffect[1])
else
$(tooltip).hide()
$(tooltip).unbind('click');
},
但这只是一个想法...并且用户必须单击工具提示而不是按钮...
另一种方法是在工具提示处具有 id,在带有前缀的关闭按钮上具有相同的 id(例如"tooltip1_closeButton")。比你可以在"渲染"函数中附加按钮的onclick事件,如
$(tooltip.id + "_closeButton").bind("click",
function(e)
{
htmltooltip.hidetip($, parseInt(this.tippos), e)
}
相关文章:
- Google图表HTML工具提示,其中包含javascript onclick事件
- 为什么我的引导工具提示的标题只会随着jQuery中的keydown事件而更改一次
- 关闭Body Click事件的工具提示-工作不正常
- 为什么 qtip2 工具提示中的点击事件不起作用
- 将鼠标悬停事件更改为工具提示的 Onclick 事件
- 来自外部函数的Highchart工具提示和事件
- 无法将表单输入字段上的 JQuery UI 工具提示限制为仅在单击/焦点事件上显示
- 如何禁用标题工具提示!(was:如何在Javascript中获取事件目标后面的元素?
- 仅当支持触摸事件时才使用引导工具提示
- 在谷歌地图v3中显示鼠标悬停事件的工具提示
- jQuery简单的工具提示即使事件被触发也不会显示
- 工具提示中未捕获的事件
- 当指针在父元素上时,Boostrap工具提示会在父元素隐藏之前触发悬停事件
- 启动工具提示在任何其他事件运行后停止工作
- 我想为选中的项目附加一个点击事件,并在jquery的自动完成控件中显示鼠标上的工具提示
- 当单击事件发生时隐藏工具提示
- D3:当鼠标悬停事件时,多系列折线图的每条线上都有工具提示
- 显示来自SVG onclick事件的ajax工具提示
- 在高图工具提示中单击事件未激发
- 检测单击复选框时的工具提示事件