Display info box on hover select option

Question

I am looking to display a info box when user hover on the select option. for ex:

    <select id = "sel">
       <option value="sick leave">Sick leave</option>
       <option value="urgent leave">urgent leave</option>
       <option value="maternity leave">Maternity leave</option>
       <option value="relocation leave">Relocation leave</option>
     </select>

when the user mouse over the options a message box should display showing the number of leaves he is left with of that particular type and as he moves down the info should change according to the type of leave the cursor is pointing

What jQuery code have you come up with? – Robert Jul 24 '16 at 14:50 — Robert, Jul 24 '16 at 14:50

score 0 · Answer 1 · edited May 23 '17 at 11:44

0

You would want to do this using css psuedo elements.

Someone asked a very similar question and received a detailed response here:

How to create a box when mouse over text in pure CSS?

edited May 23 '17 at 11:44

Community

1
1

answered Jul 24 '16 at 14:44

Ryan Novas

130
7

i want to do this using jquery and ajax, since i want to get my data like no. of leaves left from database. – amrender singh Jul 24 '16 at 15:06
You would use jQuery to change the psuedo element's `content`. You would also use ajax get request https://api.jquery.com/jquery.get/ – Ryan Novas Jul 24 '16 at 19:01
but this won`t display it on hover right? I want to display this box on hover on select options – amrender singh Jul 24 '16 at 19:05

score 0 · Answer 2 · answered Jun 23 '23 at 15:27

Use title attribute on each option in the select element, it works for me so it should for you.

<select id="sel">
   <option title="This is a Sick leave" value="sick leave">Sick leave</option>
   <option title="This is a urgent leave" value="urgent leave">urgent leave</option>
   <option title="This is a Maternity leave" value="maternity leave">Maternity leave</option>
   <option title="This is a Relocation leave" value="relocation leave">Relocation leave</option>
</select>

Display info box on hover select option

2 Answers2