工具提示选择框选项

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

<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/

任何建议吗？

来源

2016-12-28 Owner

你可以使用jQuery UI的做'selectmenu widget'检查演示[这里]（http://jsfiddle.net/phpdeveloperrahul/Lv57G/） –

这个while悬停在options，disp铺设期权价值。要求是选项的标题应显示:-) – Owner

您可以通过使用标准引导工具提示做到这一点看到我的回答 – ustmaestro

由于tooltip在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;"> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="col-sm-4"></div> 
 
\t \t \t \t <div class="col-sm-4"> 
 
\t \t \t \t \t <select name="opts" id="opts" class="form-control" multiple> 
 
\t \t \t \t \t \t <option value="1" data-toggle="tooltip" data-container="#tooltip_container" title="tooltip 1">option 1</option> 
 
\t \t \t \t \t \t <option value="2" data-toggle="tooltip" data-container="#tooltip_container" title="tooltip 2">option 2</option> 
 
\t \t \t \t \t \t <option value="3" data-toggle="tooltip" data-container="#tooltip_container" title="tooltip 3">option 3</option> 
 
\t \t \t \t \t \t <option value="4" data-toggle="tooltip" data-container="#tooltip_container" title="tooltip 4">option 4</option> 
 
\t \t \t \t \t \t <option value="5" data-toggle="tooltip" data-container="#tooltip_container" title="tooltip 5">option 5</option> 
 
\t \t \t \t \t \t <option value="6" data-toggle="tooltip" data-container="#tooltip_container" title="tooltip 6">option 6</option> 
 
\t \t \t \t \t </select> 
 
\t \t \t \t \t <div id="tooltip_container"></div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-sm-4"></div> 
 
\t \t \t </div>

来源

2016-12-28 10:28:37 ustmaestro

工具提示选择框选项

回答

相关问题