CODEWITHSUNDEEP
javascripthtmlcss
Kevin Davis
Kevin Davis

Reputation: 365

Information box based on drop down selection

Here is what I'm trying to do.. I have a drop box and I want a floating box to show a definition based on the item.

For example, the list contains,

Item 1 Item 2 Item 3 Item 4

The user hovers over Item 2 and a brief description will popup.

Is there a way for me to do it? I'm not looking for the entire code, I just wanted to pointed in the right direction.

THank you...

Upvotes: 0

Views: 432

Answers (1)

Head
Head

Reputation: 568

There's lots of different ways to do accomplish this task.

purely css

<a>Hover over me!</a>
<div>Stuff shown on hover</div>

div {
    display: none;
}

a:hover + div {
    display: block;
}

Also there is jquery:

$("#yourElement").attr('title', 'This is the hover-over text');

There's a plugin for it as well in jquery if you might need to use it a lot:

jQuery Tooltip plugin. find that here

http://jqueryui.com/tooltip/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php%3Ftitle%3DPlugins%2FTooltip%26redirect%3Dno

javascript:

<div style="width: 80px; height: 20px; background-color: red;" 
        onmouseover="document.getElementById('div1').style.display = 'block';">
   <div id="div1" style="display: none;">Text</div>
</div>


onmouseout="document.getElementById('div1').style.display = 'none';"

another jquery option is show and hide:

$("#menu").hover(function(){
    $('.flyout').show();
},function(){
    $('.flyout').hide();
});

jquery mouseover and mouseout:

http://jsfiddle.net/hGTPp/

Upvotes: 1

Related Questions