I need to display the text of selected option of a dropdown list in a tooltip. For this I'm using jquery's tooltip plugin.
<select name="dropdown" class="tooltip" title="this.text">
<option value=1>Text1 </option>
<option value=2>Text2</option>
Edit: Code from comment below:
<select name="release_version" id="release_version" class="tooltip" title="this.text" onChange="updateBuildPath(this.value);">
<option value="12.5" selected="selected">Snapper</option>
<option value="12.1">R12SP1</option><option value="12">R12</option>
<option value="11.2">R11.2 SP4</option>
</select>
Using this, I see the text this.text
in the tooltip, but what I want is text1
or text2
based on selected option. Is there anyway we can assign the title
to selected text of the dropdown?
Of course it is working fine, if I use mouseover
instead of tooltip class. But I want to achieve this using jQuery tooltip only as it is used extensively in my website
<select name="dropdown" onmouseover="this.title=this.text">
开发者_开发问答 <option value=1>Text1 </option>
<option value=2>Text2</option>
Thanks in advance, Sreedhar.
Have you tried anything like this? You can see a live demo on jsFiddle
//add a tooltip for the select box
//with a custom bodyHandler to dynamically update the tooltip text
$("select").tooltip({
left: 25,
bodyHandler: function(){
return $('#release_version').attr('title');
}
});
//bind an event handler for the change event
//so that when a new option is selected, the title for the
//select element can be updated
$('#release_version').bind('change', function(e){
var newTitle='';
$("#release_version option:selected")
.each(function () {
newTitle+= $(this).text() + " ";
});
$(this).attr('title', newTitle);
});
//trigger the initial selection so that the text of the element marked as
//selected when the page loads will be selected when the page loads
$('#release_version').trigger('change');
The idea here is to bind to the change
event on the select
and then set it's title
attribute to the text
of the option
element that was selected. You also need to provide a bodyHandler
for tooltip()
since you need the text of the tooltip to be dynamic.
This is what you need to do ...
$(element).bind("mouseover", function () {
if ($(element)[0])
{
$(element)[0].title = $(element)[0].options[$(element)[0].selectedIndex].text;
}
});
精彩评论