Использование всплывающей подсказки с AngularJS

Чтобы подсказки работали в первую очередь, вы должны инициализировать их в своем коде. Не обращая внимания на AngularJS на секунду, вы получите подсказки для работы в jQuery:

$(document).ready(function(){
    $('[data-toggle=tooltip]').hover(function(){
        // on mouseenter
        $(this).tooltip('show');
    }, function(){
        // on mouseleave
        $(this).tooltip('hide');
    });
});

Это также будет работать в приложении AngularJS, если оно не отображает содержимое Angular (например, ng-repeat). В этом случае вам нужно написать директиву, чтобы справиться с этим. Вот простая директива, которая сработала для меня:

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

Затем все, что вам нужно сделать, это включить атрибут "tooltip" в элемент, для которого вы хотите, чтобы всплывающая подсказка отображалась:

<a href="#0" title="My Tooltip!" data-toggle="tooltip" data-placement="top" tooltip>My Tooltip Link</a>

Надеюсь, это поможет!

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

<button type="button" class="btn btn-default" 
    data-placement="left"
    title="Tooltip on left"
    onmouseenter="$(this).tooltip('show')">
</button>

Простой ответ - с помощью UI Bootstrap (ui.bootstrap.tooltip)

Кажется, есть очень сложные ответы на этот вопрос. Вот что сработало для меня.

• Установить UT Bootstrap - $ bower install angular-bootstrap

• Inject UI Bootstrap как зависимость - angular.module('myModule', ['ui.bootstrap']);

• Используйте директиву uib-tooltip в своем html.

<button class="btn btn-default"
        type="button"
        uib-tooltip="I'm a tooltip!">
     I'm a button!
</button>

Если вы создаете приложение Angular, вы можете использовать jQuery, но есть много веских причин, чтобы попытаться избежать его в пользу более Angular управляемых парадигм. Вы можете продолжать использовать стили, предоставляемые bootstrap, но замените плагины jQuery на native Angular, используя UI Bootstrap

Включите файлы CSS Boostrap, Angular.js и ui.Bootstrap.js:

<link href="/bootstrap.min.css" rel="stylesheet">
<script src="/angular.js"></script>
<script src="/ui-bootstrap-tpls-0.11.0.js"></script>

Убедитесь, что вы ввели ui.bootstrap при создании своего модуля следующим образом:

var app = angular.module('plunker', ['ui.bootstrap']);

Затем вы можете использовать директивы Angular вместо атрибутов данных, полученных jQuery:

<button type="button" class="btn btn-default" 
        title="Tooltip on left" data-toggle="tooltip" data-placement="left"
        tooltip="Tooltip on left" tooltip-placement="left" >
  Tooltip on left
</button>

Демо в Plunker

Предотвращение загрузки пользовательского интерфейса

jQuery.min.js(94kb) + Bootstrap.min.js(32kb) также давая вам больше, чем вам нужно, и гораздо больше, чем ui-bootstrap.min.js(41kb).

И время, затрачиваемое на загрузку модулей, является лишь одним из аспектов производительности.

Если вы действительно хотите загружать нужные модули, вы можете "Создать сборку" и выбрать всплывающие подсказки с сайта Bootstrap-UI. Или вы можете изучить исходный код для всплывающих подсказок и выбрать, что вам нужно.

Здесь добавлена ​​миниатюрная пользовательская сборка с помощью подсказок и шаблонов (6kb)

Включили ли вы Bootstrap JS и jQuery?

<script src="/jquery-1.10.1.min.js"></script>
<script src="/bootstrap.min.js"></script>

Если вы еще не загрузили их, то Angular UI (http://angular-ui.github.io/bootstrap/) может быть не слишком накладным. Я использую это с моим приложением Angular, и у него есть директива подсказки. Попробуйте использовать tooltip="tiptext"

<button type="button" class="btn btn-default" 
        data-toggle="tooltip" data-placement="left"
        title="Tooltip on left"
        tooltip="This is a Bootstrap tooltip"
        tooltip-placement="left" >
            Tooltip on left
</button>

Я написал простую угловую директиву, которая хорошо сработала для нас.

Вот демо: http://jsbin.com/tesido/edit?html,js,output

Директива (для Bootstrap 3):

// registers native Twitter Bootstrap 3 tooltips
app.directive('bootstrapTooltip', function() {
  return function(scope, element, attrs) {
    attrs.$observe('title',function(title){
      // Destroy any existing tooltips (otherwise new ones won't get initialized)
      element.tooltip('destroy');
      // Only initialize the tooltip if there text (prevents empty tooltips)
      if (jQuery.trim(title)) element.tooltip();
    })
    element.on('$destroy', function() {
      element.tooltip('destroy');
      delete attrs.$$observers['title'];
    });
  }
});

Примечание. Если вы используете Bootstrap 4, в строках 6 и 11 выше вам нужно заменить tooltip('destroy') tooltip('dispose') dispose tooltip('dispose') (спасибо пользователю user1191559 за это обновление)

Просто добавьте bootstrap-tooltip в качестве атрибута к любому элементу с title. Angular будет отслеживать изменения в title но в противном случае передаст обработку всплывающей подсказки в Bootstrap.

Это также позволяет вам использовать любой из собственных параметров всплывающей подсказки Bootstrap в качестве data- обычным способом Bootstrap.

Разметка:

<div bootstrap-tooltip data-placement="left" title="Tooltip on left">
        Tooltip on left
</div>

Понятно, что в нем нет всех сложных привязок и расширенной интеграции, которые предлагают AngularStrap и UI Bootstrap, но это хорошее решение, если вы уже используете Bootstrap JS в своем приложении Angular и вам просто нужен базовый мост всплывающей подсказки для всего приложения без изменение контроллеров или управление событиями мыши.

Вы можете создать простую директиву следующим образом:

angular.module('myApp',[])
    .directive('myTooltip', function(){
        return {
            restrict: 'A',
            link: function(scope, element){
                element.tooltip();
            }
        }
    });

Затем добавьте свою настраиваемую директиву, если это необходимо:

<button my-tooltip></button>

Вы можете использовать selector option для приложений с динамическими одностраничными страницами:

jQuery(function($) {
    $(document).tooltip({
        selector: '[data-toggle="tooltip"]'
    });
});

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

Вы можете сделать это с помощью AngularStrap, который

представляет собой набор директив native, которые позволяют бесшовно интегрировать Bootstrap 3.0+ в ваше приложение AngularJS 1.2+.

Вы можете ввести всю библиотеку следующим образом:

var app = angular.module('MyApp', ['mgcrea.ngStrap']); 

Или просто потяните за функцию всплывающей подсказки, как это:

var app = angular.module('MyApp', ['mgcrea.ngStrap.tooltip']); 

Демонстрация в фрагментах стека

var app = angular.module('MyApp', ['mgcrea.ngStrap']);  

<link href="/bootstrap.min.css" rel="stylesheet">
<script src="/angular.min.js"></script>
<script src="/angular-strap.min.js"></script>
<script src="/angular-strap.tpl.min.js"></script>

<div ng-app="MyApp" class="container" >

  <button type="button" 
          class="btn btn-default" 
          data-trigger="hover" 
          data-placement="right"
          data-title="Tooltip on right"
          bs-tooltip>
    MyButton
  </button>

</div>

добавьте $("[data-toggle=tooltip]").tooltip(); к соответствующему контроллеру.

Попробуйте всплывающую подсказку (ui.bootstrap.tooltip). См. Angular директивы для Bootstrap

<button type="button" class="btn btn-default" tooltip-placement="bottom" uib-tooltip="tooltip message">Test</button>

Рекомендуется избегать кода JavaScript в верхней части AngularJS

Только читать это, если динамически назначать подсказки

то есть. <div tooltip={{ obj.somePropertyThatMayChange }} ...></div>

У меня возникла проблема с динамическими всплывающими подсказками, которые не всегда обновлялись в представлении. Например, я делал что-то вроде этого:

Это не работает последовательно

<div ng-repeat="person in people">
    <span data-toggle="tooltip" data-placement="top" title="{{ person.tooltip }}">
      {{ person.name }}
    </span> 
</div> 

И активируем его так:

$timeout(function() {
  $(document).tooltip({ selector: '[data-toggle="tooltip"]'});
}, 1500)

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

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

Что казалось проблемой

Bootstrap копировал значение свойства title в новый атрибут data-original-title и удалял свойство title (иногда), когда я активировал toooltips. Однако, когда my title={{ person.tooltip }} изменится, новое значение не всегда будет обновляться в свойстве data-original-title. Я попытался отключить всплывающие подсказки и реактивировать их, уничтожив их, привязывая к этому свойству напрямую... все. Однако каждый из них либо не работал, либо создавал новые проблемы; такие как атрибуты title и data-original-title, которые удаляются и не связаны с моим объектом.

Что работало

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

$timeout(function() {
    $('[data-toggle="tooltip"]').each(function(index) {
      // sometimes the title is blank for no apparent reason. don't override in these cases.
      if ($(this).attr("title").length > 0) {
        $( this ).attr("data-original-title", $(this).attr("title"));
      }
    });
    $timeout(function() {
      // finally, activate the tooltips
      $(document).tooltip({ selector: '[data-toggle="tooltip"]'});
    }, 500);
}, 1500);

Что здесь происходит по существу:

• Подождите некоторое время (1500 мс) для завершения цикла дайджест и обновите title.
• Если существует свойство title, которое не пусто (т.е. оно изменилось), скопируйте его в свойство data-original-title, чтобы оно было подхвачено инструментами Bootstrap.
• Повторная активация всплывающих подсказок

Надеюсь, что этот длинный ответ поможет кому-то, кто, возможно, боролся так же, как и я.

Помните одно, если вы хотите использовать всплывающую подсказку bootstrap в angularjs - это порядок ваших скриптов, если вы используете jquery-ui, это должно быть:

• JQuery
• Пользовательский интерфейс jQuery
• Bootstap

Пробовал и тестировал

установите зависимости:

npm install jquery --save
npm install tether --save
npm install bootstrap@version --save;

затем добавьте скрипты в angular -cli.json

"scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/tether/dist/js/tether.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
        "script.js"
    ]

затем создайте script.js

$("[data-toggle=tooltip]").tooltip();

перезагрузите сервер.

impproving @aStewartDesign ответ:

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

Там нет необходимости в jquery, его позднем андерсере, но я подумал, что, так как это верхний проголосовавший, я должен указать на это.

AnguleStrap не работает в IE8 с версией angularjs 1.2.9, поэтому не используйте это, если ваше приложение должно поддерживать IE8