Question

I am doing a website using asp.net C# and I would like to popup a small window with information as soon as mouse hover a particular word. I know that I have to use jquery but I don’t know exactly how to do it.

Any suggestions please?

Answer 1

There are many plugins out there that will help you achieve what you are looking for. However it is also very possible to implement this functionality yourself. I wouldn’t be surprised either if some of the plugins you come across also use similar code.

The following is my attempt to demystify tooltip/popup plugin behaviour.

You could wrap the desired word in a <span> element and give it a .hover class.

<div>
  This is some text with a <span class="hover">special</span> 
  word that has hovercraft capabilities.
</div>

Your jQuery (ver 1.7+) would look something like this :

$(".hover").on('mouseenter',function(){
  // The popup must be shown here (mouse is over element).
}).on('mouseleave',function(){
  // The popup must be hidden here (mouse has left element).
});

I should add here that I am using a great and yet sometimes forgotten capability of jQuery called “chaining”. The on() function actually returns the object that it was attached to. In this case $(".hover") – so if I want to call another function on that object I can just add it as another function at the end. Another example of this would be :

$("#myElement").text("An error has occured!").css("color","#FF0000");

That line of code would also at the text to #myElement and also turn the colour red.

With regard to your actual popup – I would suggest two things :

1. Have an element at the bottom of your markup (written last so highest index – or manually set the highest z-index)
2. You could also have the popup in a hidden element right next to the element that is supposed to trigger the popup.