CODEWITHSUNDEEP
jqueryjquery-uiselectdrop-down-menutooltip
zabby
zabby

Reputation: 217

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"}
    }); 
});

Upvotes: 5

Views: 10771

Answers (4)

Agtari
Agtari

Reputation: 11

As jQuery UI tooltip works for <option> only if the size attribute is set for the <select> element

I made a workaround that is working for me, find it here

Upvotes: 1

HoldOffHunger
HoldOffHunger

Reputation: 20881

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.

Upvotes: 0

T J
T J

Reputation: 43156

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

Upvotes: 1

TResponse
TResponse

Reputation: 4125

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.

Upvotes: 0

Related Questions