Shabin Muhammed Shabin Muhammed - 1 month ago 20
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>');
$compile(el)(scope);
elem.after(el);
}
};
}); /*
Usage : <ANY info-tooltip data-tooltip="tooltip message">
*/


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

Answer

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)

Comments