Menu
I have a select box in which the options have policy name. I need to display the description of policies in tool tip of the options. I tried tipr plugin where data-tip option is used for this. It works fine for div, span etc but not for select box option. I also tried normal method that I attached in the above link. This works only when the drop down is open by default .
<div>
<h4>Default behaviours</h4>
<select>
<option title=""></option>
<option title="1">1</option>
<option title="2">2</option>
<option title="3">3</option>
<option title="4">4</option>
</select>
<select multiple>
<option title=""></option>
<option title="1">1</option>
<option title="2">2</option>
<option title="3">3</option>
<option title="4">4</option>
</select>
</div>
<div>
<h4 class='uitip' title='Tests with jQuery UI Tooltips applied'>jQuery UI tooltips</h4>
<select class='uitip' title='has tooltips'>
<option title=""></option>
<option title="1">1</option>
<option title="2">2</option>
<option title="3">3</option>
<option title="4">4</option>
</select>
<select multiple class='uitip' title='has tooltips'>
<option title=""></option>
<option title="1">1</option>
<option title="2">2</option>
<option title="3">3</option>
<option title="4">4</option>
</select>
</div>
http://jsfiddle.net/slolife/Dp4te/
Any suggestions please?
574
You must specify a container for tooltip outside select, because tooltip is rendered inside select and is ignored by browser. As is specified in twitter bootstrap documentation tooltips are by default disabled you must enable it by yourself. http://getbootstrap.com/javascript/#four-directions See an working example below or https://jsfiddle.net/5xj10efa/
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container" style="margin-top:80px;">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<select name="opts" id="opts" class="form-control" multiple>
<option value="1" data-toggle="tooltip" data-container="#tooltip_container" title="tooltip 1">option 1</option>
<option value="2" data-toggle="tooltip" data-container="#tooltip_container" title="tooltip 2">option 2</option>
<option value="3" data-toggle="tooltip" data-container="#tooltip_container" title="tooltip 3">option 3</option>
<option value="4" data-toggle="tooltip" data-container="#tooltip_container" title="tooltip 4">option 4</option>
<option value="5" data-toggle="tooltip" data-container="#tooltip_container" title="tooltip 5">option 5</option>
<option value="6" data-toggle="tooltip" data-container="#tooltip_container" title="tooltip 6">option 6</option>
</select>
<div id="tooltip_container"></div>
</div>
<div class="col-sm-4"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
Update: add a code snippet
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container" style="margin-top:80px;">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4">
<select name="opts" id="opts" class="form-control" multiple>
<option value="1" data-toggle="tooltip" data-container="#tooltip_container" title="tooltip 1">option 1</option>
<option value="2" data-toggle="tooltip" data-container="#tooltip_container" title="tooltip 2">option 2</option>
<option value="3" data-toggle="tooltip" data-container="#tooltip_container" title="tooltip 3">option 3</option>
<option value="4" data-toggle="tooltip" data-container="#tooltip_container" title="tooltip 4">option 4</option>
<option value="5" data-toggle="tooltip" data-container="#tooltip_container" title="tooltip 5">option 5</option>
<option value="6" data-toggle="tooltip" data-container="#tooltip_container" title="tooltip 6">option 6</option>
</select>
<div id="tooltip_container"></div>
</div>
<div class="col-sm-4"></div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
