Как добавить всплывающее сообщение на отключенную кнопку при наведении курсора на angularjs?

Question

В моей форме есть кнопка отправки, которая активируется, если форма действительна, в противном случае она будет отключена. Я хочу добавить всплывающее сообщение при наведении курсора на отключенную кнопку не активную кнопку. Как добавить его динамически в angularjs?

Answer 1

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

Тогда вы захотите обернуть его в директиву для работы в AngularJS, например:

app.directive('tooltip', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs){
            element.hover(function(){
                // on mouseenter
                element.tooltip('show');
            }, function(){
                // on mouseleave
                element.tooltip('hide');
            });
        }
    };
});

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

<button tooltip="myTooltip">I am a button</button>

ПРИМЕЧАНИЕ: Если отключено, он не отображается (не проверял это), а затем просто оберните эту кнопку в <span></span> и вместо этого привязайте всплывающую подсказку к этому диапазону, поскольку диапазон не отключен.

<span tooltip="myTooltip"><button>I am a button</button></span>

В любом случае, либо вы привязываете непосредственно к кнопке, либо растягиваете вокруг нее, не забудьте в контроллере для этого представления установить текст подсказки:

$scope.myTooltip = 'Tooltip text';