Tooltip on Hover of select box options generated by ng-options in Angularjs

Question

I am using ng-options to iterate options in select box , Here is my code below ..

<select id="multiSelectAvailable" ng-model="selected.available" multiple 
        ng-options="e as e[displayAttr] for e in available"></select>

How to show a tooltip of displayAttr when hover on options?

Answer 1

Tool tip over select options is possible through jquery tooltip.

Edit :

have a custom directive.

angular.module('ui.bootstrap.demo').directive('myDirec', ['$log', '$templateCache', '$compile', function($log, $templateCache, $compile) {
  return {
    restrict: 'A',
    priority: 1000,

    link: function(scope, element, attr) {
            element.children().attr('data-toggle', 'tooltip');
            element.children().attr('data-placement', 'tooltip');
            element.children().attr('title', 'hello tool tip');

      $compile(element)(scope);
    },
  };
}]);

and

<select my-direc ng-model="select" multiple data-toggle="tooltip" data-placement="top" title="{{e.toolTip}}"
        ng-options="e as e.tableName for e in data"></select>

Updated Plunker link for the same.

Try this,

In app.js,

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TooltipDemoCtrl', function ($scope, $sce) {
  $scope.dynamicTooltip = 'Hello, World!';
  $scope.dynamicTooltipText = 'dynamic';
  $scope.htmlTooltip = $sce.trustAsHtml('I\'ve been made <b>bold</b>!');
   $scope.data = [{
      id: 1,
      tableName: 'table1',
      toolTip:'tool tip 1'
    }, {
      id: 2,
      tableName: 'table2',
      toolTip:'tool tip 2'
    }, {
      id: 3,
      tableName: 'table3',
      toolTip:'tool tip 3'
    }];
});
angular.module('ui.bootstrap.demo').directive('myDirec', ['$log', 
'$templateCache', '$compile', function($log, $templateCache, $compile) {
  return {
    restrict: 'A',
    priority: 1000,

    link: function(scope, element, attr) {
            element.children().attr('data-toggle', 'tooltip');
            element.children().attr('data-placement', 'tooltip');
            element.children().attr('title', 'hello tool tip');

      $compile(element)(scope);
    },
  };
}]);

In HTML,

<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.4.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">


  </head>
  <body ng-controller="TooltipDemoCtrl">

       <select  ng-model="select" >
          <option data-toggle="tooltip" data-placement="top" title="{{item.toolTip}}"  ng-repeat="item in data">{{item.tableName}}</option> 
       </select>

  </body>
</html>

Hope this helps. :)

Answer 2

HTML CODE:

<html ng-app="myApp">
 <head>
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
   <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"> 
   </script>
   <script src="example.js"></script>
   <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
   rel="stylesheet">
</head>

<body>
  <div ng-controller="PopoverDemoCtrl">    
   <button popover-placement="{{placement.selected}}" uib-popover="On the 
   {{placement.selected}}" type="button" class="btn btn-default">Popover</button>
  </div>
</body>
</html>

Angular JS Code:

angular.module('myApp', [ 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope) {

$scope.placement = {
options: [
  'top',
  'top-left',
  'top-right',
  'bottom',
  'bottom-left',
  'bottom-right',
  'left',
  'left-top',
  'left-bottom',
  'right',
  'right-top',
  'right-bottom'
],
 selected: 'right'
};

});

Answer 3

I had similar problem that I solved with a simplistic approach using jquery inside my angular controller.

JS file

scope.addToolTip = function(){

  $(#multiSelectAvailable option).each(function(i){
     if(i>0){
       var title =  $(this).text();
       $(this).attr('title',title);
     }
  });
}

HTML

<select id="multiSelectAvailable" ng-model="selected.available" ng-options="e as e[displayAttr] for e in available" ng-mouseover="addToolTip()"></select>

NOTE: addToolTip() method can also be written using simple java script code to modulate dom.

Tooltip on Hover of select box options generated by ng-options in Angularjs

Question

3 answers

solution1
5 ACCPTED 2015-10-07 12:35:38

solution2
0 2019-03-07 21:23:16

solution3
0 2020-06-01 08:05:48

Tooltip on Hover of select box options generated by ng-options in Angularjs

Question

3 answers

solution1 5 ACCPTED 2015-10-07 12:35:38

solution2 0 2019-03-07 21:23:16

solution3 0 2020-06-01 08:05:48

solution1
5 ACCPTED 2015-10-07 12:35:38

solution2
0 2019-03-07 21:23:16

solution3
0 2020-06-01 08:05:48