Window Selection Hint

Question

Window Selection Hint

I have a selection box in which the settings have the name of the policy. I need to display the policy description in the tooltip. I tried the tipr plugin, where the data hint option is used for this. It works fine for div, span, etc., but not for the select box option. I also tried the usual method that I attached to the specified link. This only works when the drop-down list 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?

+1

twitter bootstrap tooltip

Owner Dec 28 '16 at 9:51

source share

1 answer

ustmaestro · Answer 1 · 2016-12-28T10:28:37+0000

select, select . twitter bootstrap, , . http://getbootstrap.com/javascript/#four-directions . 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>

:

  $(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>

Hide result

Window Selection Hint

More articles: