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

  • Single slide respo slider plugin

    Simple jQuery content slider plugin

    • 450
    • 31
    • 450
    • facebook icon
    • twitter icon
    • google plus
  • Css3 image blending like photoshop

    CSS3 blend mode blends two background simultaneously like Photoshop blending.

    • 249
    • 4
    • 249
    • 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.

    • 238
    • 7
    • 238
    • 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