Question

I have a JS for tooltip on Mouseover,

What should i change to convert the mouseover to onclick event in this JS.

I tried replacing some but didnt work ! Here is the JS below. But it didnt work, Instead it was showing an error.

Can it be done or all the code needs to be changed !

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

As I see (have not tried it) you just have to replace

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

with

$anchor.click( 
            function(e){ //onMouseover element 
                htmltooltip.positiontip($, parseInt(this.tippos), e) 
                htmltooltip.showtip($, parseInt(this.tippos), e) 
            }
        ) 

but you will have to add a “close” button to the tooltip to hide it again. Or any other solution/behavior you would like to have.

update:

You could try to set the “onclick” handler of the tooltip.
Could look like:

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');              
},             

But its just an idea… and the user would have to click the tooltip not the button…

An other one would be to have ids at your tooltips and the same id at the close buttons with a prefix or so (for example “tooltip1_closeButton”).
Than you could attach the onclick event of the buttons in the “render” function like

$(tooltip.id + "_closeButton").bind("click", 
    function(e)
    {
        htmltooltip.hidetip($, parseInt(this.tippos), e) 
    }