I am trying to create a hover-tooltip using Bootstrap UI. The tooltip should be visible when mouse is hovered on the button, the tooltip has a link which should be clickable. But the default popover and tooltip provided by Bootstrap UI, disappear when mouse es out of it. I have searched a lot online, but couldn't find a solution. Some sites have given a solution using jQuery, but my requirement is in AngularJS. Many sites cite that we have to use $tooltipProvider, could you please tell me how to write a customEvent for 'mouseenter' and 'mouseleave' inside the controller.

I am trying to create a hover-tooltip using Bootstrap UI. The tooltip should be visible when mouse is hovered on the button, the tooltip has a link which should be clickable. But the default popover and tooltip provided by Bootstrap UI, disappear when mouse es out of it. I have searched a lot online, but couldn't find a solution. Some sites have given a solution using jQuery, but my requirement is in AngularJS. Many sites cite that we have to use $tooltipProvider, could you please tell me how to write a customEvent for 'mouseenter' and 'mouseleave' inside the controller.

• javascript
• jquery
• angularjs
• twitter-bootstrap
• twitter-bootstrap-tooltip

Share Improve this question Follow asked Jun 3, 2015 at 10:25 akashrajknakashrajkn 2,31522 gold badges2424 silver badges4747 bronze badges 2

• stackoverflow./questions/13015432/… – nikhil mehta Commented Jun 3, 2015 at 10:32
• 1 That one doesn't use the angular tooltip – devqon Commented Jun 3, 2015 at 10:33

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

check this link,

http://fiddle.jshell/WojtekKruszewski/Zf3m7/22/light/

It has been achieved using jQuery, write a directive in AngularJS. You can integrate jQuery plugin in angularJS app, look at this site

https://amitgharat.wordpress./2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/

Are you looking for popover tooltip which is being stable and hide once it is accessed...Please see below working fiddle:

FIDDLE

<i class="fa fa-info-circle infoIcon" data-toggle="popover" data-content='Lorem Ipsum<br/><a href="#"><span class="learnMore">Learn More</span></a>'></i>

JS:

<i class="fa fa-info-circle infoIcon" data-toggle="popover" data-content='Lorem Ipsum<br/><a href="#"><span class="learnMore">Learn More</span></a>'></i>

I made a sticky dropdown extension for dropdown. Here's my code:

'use strict';

angular.module('ui.bootstrap.stickyDropdownToggle', []).directive('stickyDropdownToggle', ['$document', '$location', function ($document, $location) {
    var openElement = null,
      closeMenu = angular.noop;
    return {
        restrict: 'CA',
        link: function (scope, element, attrs) {
            scope.$watch('$location.path', function () { closeMenu(); });
            element.parent().bind("click", function (event) { if (event) { event.stopPropagation(); } });
            element.bind('click', function (event) {

                var elementWasOpen = (element === openElement);

                event.preventDefault();
                event.stopPropagation();

                if (!!openElement) {
                    closeMenu();
                }

                if (!elementWasOpen && !element.hasClass('disabled') && !element.prop('disabled')) {
                    element.parent().addClass('open');
                    openElement = element;
                    closeMenu = function (event) {
                        if (event) {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                        $document.unbind('click', closeMenu);
                        element.parent().removeClass('open');
                        closeMenu = angular.noop;
                        openElement = null;
                    };
                    $document.bind('click', closeMenu);
                }
            });
        }
    };
} ]);

and to use it:

<button type="button" class="btn sticky-dropdown-toggle" ng-click="focusOnParticularElementInsideThePopup()"
                                        style="font-size: 1em">
                                    <span class="glyphicon glyphicon glyphicon-tags"></span>
                                </button>