Question

I’m trying to display a tooltip or hover-text in a list-menu whereby if the user select that value, there will be additional text provided. Is it possible ? As the data is currently stored in a hard-coded array.

Code:
<select name="Interests" id="Interests">
 <?php $arr = array('', 'cycling', 'badminton', 'jetskiing', 'ice-skating');
 for($i = 0; $i < count($arr); $i++)
 {
    echo "<option value=\"{$arr[$i]}\" {$selected}>{$arr[$i]}</option>\n"; 
 }
?>
</select>

So if I select the cycling, there should be text appearing on the list-menu. Kindly advise. Thanks!

Answer 1

Here is a possible solution. It uses jQuery, since you can’t use the title-attribute and you can’t put another child element into the select-Container, it wouldn’t be valid HTML.

See the Demo:

http://jsfiddle.net/DLyMG/

How it works

The trick with this is, to bind the hover interests.hover. The first function is triggered when you’re over the select-box, the second is triggered when you leave. I added a timeout for this reason: When the user selects something, he moves out of the element (because the list is longer than the element itself). So, when he selects something, he would also trigger the mouseout event, therefore we have the timeout.

The second thing is to bind the onchange-event, which is done below. When the user selects a value, the content of the tooltip is changed and you can add any text or HTML as you like.

Javascript

<script>

$(document).ready(function () {

    var interests       = $('#Interests');
    var tooltip         = $('#tooltip');
    var tooltipInfo     = $('#tooltip_info');

    interests.hover(
        function() {
            tooltip.fadeIn(200);
        },
        function() {
            setTimeout ( function () {
                tooltip.fadeOut(200); tooltipInfo.html();
            }, 1000);
        }
    );

    interests.bind('change', function() {
        tooltipInfo.html('user has changed the value');
    });

});

</script>

CSS

<style>

aside.tooltip {
    display:        none;
    position:       absolute;
    top:            20px;
    left:           300px;
}

</style>

HTML

<select id="Interests">
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
    <option value="3">Value 3</option>
</select>

<aside id="tooltip" class="tooltip">
    Hey, I'm a Tooltip.
    <span id="tooltip_info"></span>
</aside>

Note

This needs of course some further improvements. Just an example of how this is possible. And you need to include the jQuery-library in your document, like:

<script src="src/js/com.jquery/1.7/jquery-1.7.min.js"></script>