Создайте всплывающую подсказку, которую можно щелкнуть в angularjs

Question

Я пытаюсь создать подсказку-зависание, используя интерфейс Bootstrap. Всплывающая подсказка должна быть видна, когда на кнопке наводится указатель мыши, в подсказке есть ссылка, которую нужно кликать. Но по умолчанию popover и подсказка, предоставленная пользовательским интерфейсом Bootstrap, исчезают, когда мышь выходит из нее. Я много искал в Интернете, но не смог найти решение. Некоторые сайты дали решение с помощью jQuery, но мое требование находится в AngularJS. Многие сайты ссылаются на то, что мы должны использовать $ tooltipProvider, не могли бы вы рассказать мне, как написать customEvent для «mouseenter» и «mouseleave» внутри контроллера.

Answer 1

проверить эту ссылку,

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

Это было достигнуто с помощью JQuery, написать директиву в AngularJS. Вы можете интегрировать JQuery плагин в angularJS приложение, смотрите на этом сайте

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

Answer 2

Я сделал липкое расширение выпадающего списка для выпадающего списка. Вот мой код:

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

и использовать его:

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

Answer 3

Вы ищешь поповер подсказку, находящуюся стабильными и скрыть, когда он будет доступен ... Пожалуйста, смотрите ниже рабочую скрипки:

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>