Question

I have 5 dropdown lists and I want to have a tooltip on each of them such that when a user hovers their mouse over any dropdown list, there is a tooltip that appears to show the selected text.

<select name="dropdn" class="mydpdn">
    <option>Loading...</option>
</select>

I am trying to use jquery.dimensions.js and jquery.tooltip.js. Can anyone give me an example please.

Answer 1

Something like this might work:

$("select").tooltip({
    left: 25,
    bodyHandler: function(){
        return $('.mydpdn').attr('title');
    }
});

$('.mydpdn').bind('change', function(e){
    var newTitle='';
    $(".mydpdn option:selected").each(function () {
        newTitle+= $(this).text() + " ";
    });
    $(this).attr('title', newTitle);
});

$('.mydpdn').trigger('change');

Hope it helps