Shabin Muhammed Shabin Muhammed - 7 months ago 100
AngularJS Question

Angular UIB tooltip on desktop and touch devices,

I needed to show uib tooltips with following condition :

  • On touch devices like tablets and smart phones, the tooltip should appear when the user touches the info icon.

  • On desktops etc, the tooltip should appear when the user hovers the pointer on the info icon.

The following is my tooltip directive

.directive('infoTooltip', function ($compile) {
return {
scope: {
tooltip: '@'
link: function (scope, elem, attrs) {
scope.message = scope.tooltip;
var el = angular.element('<span class="tooltip-common"><i class="fa fa-info-circle" uib-popover={{message}} popover-trigger="mouseenter" popover-placement="top" popover-animation="true"></i></span>');
}); /*
Usage : <ANY info-tooltip data-tooltip="tooltip message">

Can anyone help me modify this directive to achieve this.
Thanks in advance.


Found it myself,just need to add more events to the popover-trigger as follows :

popover-trigger="mouseenter outsideClick"

The "outsideClick" trigger will cause the popover to toggle on click, and hide when anything else is clicked.(from docs)