Forums

Mouse over text

Permalink
Hi,
I want to display a text when the mouse over.
It's like this. Lets guess we are in home page.
Now when I mouse over about page button,
I want to display some text on about page?
how to do it?
asankaw
 
adajad replied on at Permalink Reply
adajad
I would use jQuery to achieve this.
$(document).ready(function(){
  $('#id_of_about_link').hover(function(){
    $('#id_of_div_for_text').html('<p>Your text to be shown in the div including html tags</p>');
  },
  function(){
    $('#id_of_div_for_text').empty();
  });
});


The above is totally untested, but can give you a hint though.
JohntheFish replied on at Permalink Reply
JohntheFish
You could just add a title attribute to the html element.

eg
<div title="Message to show on hover">
whatever you want to hover over
</div>

or
<span title="Message to show on hover">
whatever you want to hover over
</span>


The same works for just about any HTML tag (on am img tag, you instead use the alt="" attribute)

With such an attribute, you don't need an javascript. The browser takes care of displaying the tip on hover.

(It may be possible to add such a wrapper with block design, though I have never actually tried it).

For a styled popup, many jquery tooltip plugins are available and generally use the title attribute for the tip text.