Tooltip Ng

Tooltip Ng

<div class="tooltip-example" ng-app="tooltip-test" ng-strict-di>
  <div ng-controller="testController">
    Some text that needs an explanation
    <rg-icon glyph="{{warningIcon}}" size="16" rg-tooltip="'Test message'"></rg-icon>
    <rg-icon glyph="{{warningIcon}}" size="16" rg-tooltip="{{testMessageWithQuote}}"></rg-icon>
    <rg-icon glyph="{{warningIcon}}" size="16" rg-tooltip="{{someUndefinedValue}}"></rg-icon>
  </div>
</div>

import angular from 'angular';
import IconNG from '@jetbrains/ring-ui/components/icon-ng/icon-ng';
import TooltipNG from '@jetbrains/ring-ui/components/tooltip-ng/tooltip-ng';
import {WarningIcon} from '@jetbrains/ring-ui/components/icon';

angular.module('tooltip-test', [IconNG, TooltipNG]).controller('testController', ($scope) => {
  $scope.warningIcon = WarningIcon;
  $scope.testMessageWithQuote = 'It\'s a message with a single quotation mark';
});

:global(.tooltip-example) {
  margin: 16px;
}