4

Bootstrap UI を使用してホバー ツールチップを作成しようとしています。ツールチップは、マウスがボタンの上に置かれたときに表示される必要があります。ツールチップには、クリック可能なリンクがあります。ただし、Bootstrap UI によって提供されるデフォルトのポップオーバーとツールチップは、マウスがそこから出ると消えます。オンラインでたくさん検索しましたが、解決策が見つかりませんでした。一部のサイトでは jQuery を使用したソリューションが提供されていますが、私の要件は AngularJS です。$tooltipProvider を使用する必要があると多くのサイトで言及されています。コントローラー内で「mouseenter」と「mouseleave」の customEvent を記述する方法を教えてください。

4

3 に答える 3

1

アクセスすると安定して非表示になるポップオーバー ツールチップをお探しですか...以下の作業フィドルを参照してください。

フィドル

<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>
于 2015-06-03T10:45:44.203 に答える
1

このリンクをチェックして、

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

AngularJS でディレクティブを記述し、jQuery を使用して実現しています。angularJSアプリにjQueryプラグインを統合できます。このサイトを見てください

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

于 2015-06-03T12:57:39.423 に答える
0

ドロップダウンのスティッキー ドロップダウン拡張を作成しました。これが私のコードです：

'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>
于 2015-06-03T10:33:03.507 に答える