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

select option hover tooltip
set selected value of dropdown in angularjs ng-options
how to populate dropdownlist from database using angularjs ng-options attribute
how to add tooltip for dropdownlist items in angular 6
angularjs tooltip on hover
mouseover on select option
ng-options=key value
ui-select-choices tooltip

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?

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. :)

AngularJs: tooltip on mouse hover to single value of dropdown using , No other element can be associated with the <option> tag (Generated by ng- options). And so you cannot introduce tooltip description. You want me to help you� Definition and Usage. The ng-options directive fills a <select> element with <options>.. The ng-options directive uses an array to fill the dropdown list. In many cases it would be easier to use the ng-repeat directive, but you have more flexibility when using the ng-options directive.

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'
};

});

Writing custom directive to add tooltips to ng-options in AngularJS , Our problem is that ng-options doesn't support using tooltips. appears upon hovering, or finding a way to add the title attribute to the relevant option element. AngularJS we use ngOptions directive create the list of element for select but I have no issues doing this when I'm working with a static generated select list, but� Angular.js has a powerful directive waiting for you: it’s ng-select.With it you can fill an HTML-select box from your model. It does support a pretty cool selector syntax, which is

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.

ui.bootstrap.tooltip, This repository contains a set of native AngularJS directives based on Bootstrap's All the options are described and can be downloaded from here. both to generate alerts from static and dynamic model data (using the ng-repeat directive ). ng-model="format" ng-options="f for f in formats"><option></option></select> � I want to show the tooltip corresponding to the selected option on mouse hover over the select box. I am using ng-attr-title to display the tool tip text. This works if I use simple select box, but doesn't work with angular-chosen. Here is a working example of the above code. How can I make it work with angular-chosen?

ui.bootstrap.dropdown, This repository contains a set of native AngularJS directives based on All the options are described and can be downloaded from here. This directive can be used both to generate alerts from static and dynamic model data (using the ng- repeat directive). no-pause $ (Default: false ) - The interval pauses on mouseover. AngularJS Select Boxes Previous Next AngularJS lets you create dropdown lists based on items in an array, or an object. Creating a Select Box Using ng-options.

Angular ng-options Directive, AngularJS ng-options Directive. ❮ AngularJS Reference. Example. Fill options in a dropdown list by using the items of an array: <� HTML select element with AngularJS data-binding. The select directive is used together with ngModel to provide data-binding between the scope and the <select> control (including setting default values). It also handles dynamic <option> elements, which can be added using the ngRepeat or ngOptions directives.

How to add Tooltip for each option of a select , I have this below code. var ddl = document.getElementById("stateSelect"), arr = ["I just created new DropDown and added tooltip code."� AngularJS is what HTML would have been, had it been designed for building web-apps. Declarative templates with data-binding, MVC, dependency injection and great testability story all implemented with pure client-side JavaScript!

Comments
  • see angular ui bootstrap documentation
  • Not helpful for select box options
  • its working fine but i am using ng-options with lot of filters i have to do something in select box only, can't use options tag to achieve it.
  • create a working demo of what you want without tooltip
  • plnkr.co/edit/xkHBIRjgZ2Y3FzHXogpL - check this fiddle in which i have added my code with updated part comment , but tooltip is not working
  • You can have custom directive for that . See the updated answer
  • why "hello tool tip" is static? Can it be made dynamic please?