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

Posted 2023-05-08

【中文标题】创建一个可以在 angularjs 中单击的悬停工具提示

【英文标题】：create a hover-tooltip which can be clicked in angularjs

【发布时间】：2015-08-17 12:08:46

【问题描述】：

我正在尝试使用 Bootstrap UI 创建悬停工具提示。当鼠标悬停在按钮上时，工具提示应该是可见的，工具提示有一个可以点击的链接。但是 Bootstrap UI 提供的默认弹出框和工具提示会在鼠标移出时消失。 我在网上搜索了很多，但找不到解决方案。一些网站已经给出了使用 jQuery 的解决方案，但我的要求是在 AngularJS 中。许多网站引用我们必须使用 $tooltipProvider，请您告诉我如何在控制器中为 'mouseenter' 和 'mouseleave' 编写 customEvent。

【问题讨论】：

***.com/questions/13015432/…

那个不使用角度工具提示

【参考方案1】：

检查此链接，

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/

【参考方案2】：

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

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>

【讨论】：

如果鼠标不在文本或弹出框上，弹出框应该消失。你写的小提琴，弹出框根本没有消失。

它满足我的要求，但是你如何在控制器中操作它？

【参考方案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>

【讨论】：

我无法让它工作，你能给我一个小提琴或 plnkr 的链接吗？