Question

I have select list items looking like this:

<option>- Data source A -</option>
<option>- Data source B -</option>

What I would like to do is to have a hover message appear near to the select box when users hover over items of the select list. For example have the message: “Data from North West region” appear when the user hovers over the first of the options and “Data from South West region” appear when the user hovers over the second option.

Can anyone think of a way I could do this with HTML5 (yes it’s internal and they have up to date browsers), jQuery or some other means.

Answer 1

What I would do is store the hover over text either in a data attribute of the select list option or store it using $.data(). Since I’m not 100% sure how you’re building the list, I can’t say for sure how to store the hover text.

Then you can use the qTip plugin to display the hover over text. It has options and examples of telling the plugin where to pull the information to display in the hover over.

The selector you could use

$('#selector-id option').qTip({

});

The content option is where you’d want to tell the plugin where to get the display text.