CODEWITHSUNDEEP
javascripthtml
Himanshu
Himanshu

Reputation: 1

How to use onmouseover?

I have a list being displayed on a JSP. On mouse hover on any of the value i need to show a description corresponding that value. Need to show description not as an alert and also cannot make the values as hyperlink. eg. suppose the value is ABC so on mouse hover should show AppleBoyCat. need to use onmouseover. let me know how to do it..

Upvotes: 0

Views: 2067

Answers (5)

wosis
wosis

Reputation: 1219

For simple tooltips, the title attribute is most effective, as pointed out by TJHeuvel

If you need more advanced tooltips with HTML and CSS formatting, I'd suggest you use an external library. One that works nicely without jQuery ist wz_tooltip download here, documentation here

When included correctly, you can add tooltips by calling the functions Tip() and UnTip() as follows:

<a href="index.htm" onmouseover="Tip('tip text')" onmouseout="UnTip();">Homepage </a>

Upvotes: 0

Shadow Wizard
Shadow Wizard

Reputation: 66389

As TJHeuvel already said, you can simply use the title attribute.

Best approach is to build the list with both the value and title attribute from within JSP, if not possible for some reason, you can build client side array of each value and its corresponding description then using JavaScript dynamically assign the title on mouseover.

Show us some more code to get more/better help.

Upvotes: 0

Sondre
Sondre

Reputation: 1898

Perhaps not the cleanest solution but something like this:

<a class='hover' rel='tooltip'>Link</a>

//Some hidden div, putting css inline just for example
<div id='tooltip' style='display:none;'>Content</div>

$(function() {
    $('.hover').mouseover(function() {
        var tooltip = $(this).attr('rel');
        $('#' + tooltip).fadeIn();
    });
});

And offcourse add a callback hiding it again. It just takes the value from rel of the link and use as an id for the div to show.

This is a quick and dirty solution, can be made alot smoother if you just work with it a little;) There also alot of plugins out there allowing the same functionality in a cleaner fashion.

*Edit: Just noticed you added a comment on another post that you can't use jQuery.. shouldn't tag a post with something you're not intending to use.

Upvotes: 0

TJHeuvel
TJHeuvel

Reputation: 12608

What do you want to do? If you just want to show a tooltip, you can set the title attribute of any element and it will be displayed as a tooltip.

Also, the abbr tag can be used as tooltips too:

<abbr title="test">stuff</abbr>

Upvotes: 3

JustinByrne
JustinByrne

Reputation: 61

You can go about it in two ways:

1 - a hidden dom object (a div for instance) which reveals itself when you roll over whatever

or

2 - you can rewrite the html of the particular element you're mousing over.

You can load this data in when you load everything else (either as Javascript objects, or as markup, though that's much bulkier) or you can asynchronously load the description data from a service when you mouse over (though you'll have more lag).

jQuery is a quick and dirty way to achieve this (more quick than dirty), but straight JS or pretty much any other JS library will do as well.

Upvotes: 0

Related Questions