工具提示選擇框選項

我有一個選項框，其中的選項有策略名稱。我需要在選項的工具提示中顯示策略的描述。我嘗試了使用數據提示選項的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

工具提示選擇框選項

回答

相關問題