CODEWITHSUNDEEP
jquery
learning
learning

Reputation: 11745

Mouseover on dropdown showing tooltip of the selected text

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.

Upvotes: 0

Views: 2322

Answers (1)

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100205

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

Upvotes: 1

Related Questions