javascript - 将 MouseHover 事件更改为 Tooltip 的 Onclick 事件

Question

我有一个用于鼠标悬停工具提示的 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()

Answer 1

如我所见(没试过)你只需要更换

$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) 
    }