Twitter Bootstrap Question posted in

Twitter bootstrap – Bootstrap 2 tooltips on html select's option

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 ?

Tags:

2

Answers


  1. 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.

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search