选择框选项的工具提示 [英] Tooltip on select box options

查看：22
本文介绍了选择框选项的工具提示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个选择框，其中的选项具有策略名称.我需要在选项的工具提示中显示策略的描述.我尝试了tipr插件，其中使用了数据提示选项.它适用于 div、span 等，但不适用于选择框选项.我也尝试了我在上面链接中附加的正常方法.这仅在下拉菜单默认打开时有效.

<h4>默认行为</h4><选择><option title=""></option><option title="1">1</option><option title="2">2</option><option title="3">3</option><option title="4">4</option></选择><选择多个><option title=""></option><option title="1">1</option><option title="2">2</option><option title="3">3</option><option title="4">4</option></选择>
<div><h4 class='uitip' title='应用了 jQuery UI 工具提示的测试'>jQuery UI 工具提示</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 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></选择>

http://jsfiddle.net/slolife/Dp4te/

请问有什么建议吗?

解决方案

您必须在 select 外为工具提示指定一个容器，因为工具提示在 select 内呈现并被浏览器忽略.正如 twitter bootstrap 文档中指定的那样，工具提示在默认情况下是禁用的，您必须自己启用它.http://getbootstrap.com/javascript/#four-directions请参阅下面的工作示例或 https://jsfiddle.net/5xj10efa/

<html lang="zh-cn"><头><meta charset="UTF-8"><title>文档</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"><身体><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></选择><div id="tooltip_container"></div>

<div class="col-sm-4"></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><脚本>$(document).ready(function(){$('[data-toggle="tooltip"]').tooltip();});</html>

更新:添加代码片段

 $(document).ready(function(){$('[data-toggle="tooltip"]').tooltip();});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="样式表"/><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></选择><div id="tooltip_container"></div>

<div class="col-sm-4"></div>

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?

解决方案

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>

这篇关于选择框选项的工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆