0%

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++){
            if(elem[i].title.length){
               elem[i].addEventListener("mouseover",LoadTooltip.showTooltip,true);
               elem[i].addEventListener("mousemove",LoadTooltip.dragTooltip,true);
               elem[i].addEventListener("mouseout",LoadTooltip.hideTooltip,true);
            }
        }
}

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

    • 218
    • 2
    • 218
    • facebook icon
    • twitter icon
    • google plus
  • Real time content edit

    Edit content at client side.

    • 201
    • 1
    • 201
    • facebook icon
    • twitter icon
    • google plus
  • Convert query string to json

    Convert querystring to json

    • 222
    • 0
    • 222
    • 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
Username
Password