0

I'm trying to make toolttip display on right of each option of a select, but can't.

 // tooltip select demo
$('#selectdemo option').tooltip();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>

<select id="selectdemo">
    <option data-placement="right" data-toggle="tooltip" data-original-title="Tooltip on left 1" title="Tooltip on left 1">Tooltip on left 1</option>
    <option data-placement="right" data-toggle="tooltip" data-original-title="Tooltip on left 2" title="Tooltip on left 2">Tooltip on left 2</option>
</select>

do I need to do a specific test on select option change event ?

Mike Castro Demaria
  • 700
  • 9
  • 20

2 Answers2

1

Apparently it won't work, notice this answer: https://stackoverflow.com/a/3275809/1102585

Jquery's Enter event never fires on an option, meaning you can't use javascript to trigger tooltips on <option> elements you can, however, handle the enter event on <select> and handle positioning of the tooltip by yourself, which is what the accepted solution does

Alternatively, you can also simply remove the $('#selectdemo option').tooltip(); call since the title attribute already adds a native tooltip on options

Community
  • 1
  • 1
Eduardo Wada
  • 2,606
  • 19
  • 31
0

You can call the tooltip in your JS file by assigning placement right, top, left. This will only work in the Select and not in options. here is a working example. http://www.bootply.com/iT4kv5CRP9.
There is a way to work on Multiple select option though. For multiple option selection http://www.bootply.com/2MHfTUupNK
Not sure if it can be applied for a single select option. Hope this helps.

shadab
  • 347
  • 1
  • 10