Question

我正在尝试使用Bootstrap UI创建一个悬停工具提示。当鼠标悬停在按钮上时，工具提示应该是可见的，工具提示有一个应该可点击的链接。但是，当鼠标离开时，Bootstrap UI提供的默认弹出框和工具提示会消失。我在网上搜索了很多，但无法找到解决方案。有些网站使用jQuery提供了解决方案，但我的要求是在AngularJS中。很多网站都指出我们必须使用$ tooltipProvider，请你告诉我如何编写一个customEvent用于＆＃39; mouseenter＆＃39;和＆＃39; mouseleave＆＃39;在控制器内部。

Answer 1

你是否正在寻找稳定的popover工具提示并在访问后隐藏...请参阅下面的工作小提琴：

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>

Answer 2

检查此链接，

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

使用jQuery实现，在AngularJS中编写指令。您可以在angularJS应用程序中集成jQuery插件，查看此站点

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

Answer 3

我为下拉列表制作了一个粘性下拉扩展名。这是我的代码：

'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>

创建一个可以在angularjs中单击的悬停工具提示

3 个答案: