jquery ui tooltip display on a select option
Through JQueryUI, is there a way to have the tooltip (not the default), display for an optionset/dropdown's individual options?
I have a non-working Sample
I'm not asking for the selected option to display it's title, which is occurring in the sample.
My issue is that sometimes the tooltip, depending on the browser, displays behind the dropdown list when I hover over the option. This usually happens in Firefox or IE10.
Either that or it does not use the JQueryUI tooltip. Chrome just uses default tooltip
Below is my sample code if you don't want to look at JSFiddle:
$(function () {
$(document).tooltip({items:"select,option,.optionClass",position:{ my: "left top", at: "left bottom"}
});
});
jQuery UI tooltip works for <option> only if the size attribute is set for the <select>
Only if the size attribute is set on the select element, do the events necessary for tooltip to work actually fire. - source
Here's an updated example
As an option can you not position the tooltip just right of the drop down? Add margin-left:70px to the .ui-tooltip class in your example - Its not what your asking but could be a work around.
I'm currently unable to surpass this problem myself, but I have come up with a way of at least being able to use the tooltip widget with a select.
Imagine that you have <div id="SelectFieldDiv"> holding a <select id="SelectField"> . You can get <div id="SelectFieldDiv"> to have tool-tip-styled, hover-over text :
$(document).ready(function() {
$(document).tooltip();
$('#SelectField').change(function(e) {
$('#SelectFieldDiv').prop('title', $('#SelectField').find(':selected').prop('title'));
});
$('#SelectField').change();
});
Unfortunately, the answer to the question otherwise appears to be: No, you cannot use tooltip with on select's, unless you set the size attribute to something greater than 1 (which, very few selects are like that).
I tested with the most updated versions: jQuery v. 3.2.1; jQuery-UI v. 1.12.1.
链接地址: http://www.djcxy.com/p/49648.html