Tooltip on select box options

前端未结

关注

 1  1811

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 optio

相关标签:

1条回答

谎友^

2021-01-19 06:23

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>

0 讨论(0)