Hey! Do you have any query related to front end?

Sign in Sign up

Javascript smart tooltipBack

LoadTooltip = {} Object has literals which holds variables and function.

The init() function, initialize the DOM object and assign mouse events to tooltip.

//Anonymous function for initialization
init: function(){
	//Gather all the elements;
	var elem = document.getElementsByTagName(LoadTooltip.dom_elem);
	var elem_num = elem.length;
	//Loop to give event listener
	for(var i=0; i<elem_num; i++){

This init() holds "mouseover, mousemove and mouseout" events, which made this tooltip possible.

showTooltip: function(){}, create a span and appends that to body and initialize the mouse co-ordinate to that span at once.

dragTooltip: function(){}, drags the span according to mouse co-ordiante, so we can see the tooltip as moving as we move the mouse.

hideTooltip: function(){}, And at last hide tooltip hides the span as mouse moves away from respective "a" tag.

How to call and initialize DOM?

//Provide dom element for tooltip
LoadTooltip.dom_elem = 'a';
//Call init literals after window load
window.onload = LoadTooltip.init;

This is how this tooltip has been made.

How to comment:

  • Create an account in discuss by clicking on login next to arrow.
  • Create password for discuss and varify your email id, through your mail.
  • Refresh page and comment.

You might also like

  • Get index of an element

    Get index of an element

    • 233
    • 2
    • 233
    • facebook icon
    • twitter icon
    • google plus
  • Force other page to scroll

    Scroll other page at specific location, when related link has been clicked in current page.

    • 311
    • 5
    • 311
    • facebook icon
    • twitter icon
    • google plus
  • Simple overlay popup with css3 and jquery

    Visibility hidden and opacity zero, together can beat display none property, which gives height zero during run time.

    • 276
    • 7
    • 276
    • facebook icon
    • twitter icon
    • google plus

Latest quries posted

gopa kumarabout 3 years ago

amit singhabout 3 years ago

rahmat aliabout 3 years ago

mandavi tiwariabout 3 years ago

rahul sharmaabout 3 years ago

Ask question
Latest video
Learn Angular
Profile pic
Guest Back