select要素のオプションタグのツールヒントが動作しない理由

Question

誰かがselectタグのオプションを上書きしたときにツールチップを表示するためにuib-tooltip-htmlを使用しています。しかし、それは動作しません。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 

 
<select id="repeatSelect" ng-model="$root.selectedClusterOption" class="cluster-options btn btn-default dropdown-toggle" ng-change="header.goToClusterPage()"> 
 
    <option value="allClusters" ng-selected="$root.selectedClusterOption === 'allClusters'" uib-tooltip="All Clusters" tooltip-placement="auto bottom-left">All Clusters</option> 
 
    <option ng-repeat="cluster in [{cluster_id: 1, cluster_name: 'cluster 1'}]" value="{{cluster.cluster_id}}" ng-selected="$root.selectedClusterOption === '{{cluster.cluster_id}}'" uib-tooltip-html="'{{cluster.cluster_name}}'" tooltip-placement="auto bottom">{{cluster.cluster_name}}</option> 
 
</select>

Answer 1

期待される結果を達成するために、あなたは、ブートストラップ

Codepenのデータトグル属性データトグル= "ツールチップ" のオプションの下に使用することができます - https://codepen.io/nagasai/pen/vJPgoG

 <select id="repeatSelect" ng-model="$root.selectedClusterOption" 
     class="cluster-options btn btn-default dropdown-toggle" ng-change="header.goToClusterPage()"> 
    <option value="allClusters" ng-selected="$root.selectedClusterOption === 'allClusters'" uib-tooltip="All Clusters" 
    tooltip-placement="auto bottom-left">All Clusters</option> 
    <option ng-repeat="cluster in [{cluster_id: 1, cluster_name: 'cluster 1'}]" value="{{cluster.cluster_id}}" 
    ng-selected="$root.selectedClusterOption === '{{cluster.cluster_id}}'" data-toggle="tooltip" title="{{cluster.cluster_name}}" 
    tooltip-placement="auto bottom">{{cluster.cluster_name}}</option> 
</select>