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