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.

This website stores cookies on your computer. These cookies are used to improve your website experience and provide more personalized services to you, both on this website and through other media. To find out more about the cookies we use, see our Privacy Policy.