Я пытаюсь использовать всплывающую подсказку Bootstrap в своем приложении. Мое приложение использует AngularJS. В настоящее время у меня есть следующее:
<button type="button" class="btn btn-default"
data-toggle="tooltip" data-placement="left"
title="Tooltip on left">
Tooltip on left
</button>
Я думаю, мне нужно использовать
$("[data-toggle=tooltip]").tooltip();
Однако я не уверен. Даже когда я добавляю строку выше, мой код не работает. Я пытаюсь избежать использования бутстрапа пользовательского интерфейса, поскольку он имеет больше, чем мне нужно. Однако, если бы мне пришлось включить только часть всплывающей подсказки, я был бы открыт для этого. Тем не менее, я не могу понять, как это сделать.
Может кто-нибудь показать мне, как заставить Bootstrap Tooltip работать с 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="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.angularjs.org/1.2.20/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/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>
jQuery.min.js(94kb) + Bootstrap.min.js(32kb) также давая вам больше, чем вам нужно, и гораздо больше, чем ui-bootstrap.min.js(41kb).
И время, затрачиваемое на загрузку модулей, является лишь одним из аспектов производительности.
Если вы действительно хотите загружать нужные модули, вы можете "Создать сборку" и выбрать всплывающие подсказки с сайта Bootstrap-UI. Или вы можете изучить исходный код для всплывающих подсказок и выбрать, что вам нужно.
Здесь добавлена миниатюрная пользовательская сборка с помощью подсказок и шаблонов (6kb)
Включили ли вы Bootstrap JS и jQuery?
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/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 и вам просто нужен базовый мост всплывающей подсказки для всего приложения без изменение контроллеров или управление событиями мыши.
Error: cannot call methods on tooltip prior to initialization; attempted to call method 'destroy'
ошибка.
Вы можете создать простую директиву следующим образом:
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="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/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);
Что здесь происходит по существу:
title
.title
, которое не пусто (т.е. оно изменилось), скопируйте его в свойство data-original-title
, чтобы оно было подхвачено инструментами Bootstrap.Надеюсь, что этот длинный ответ поможет кому-то, кто, возможно, боролся так же, как и я.
Помните одно, если вы хотите использовать всплывающую подсказку bootstrap в angularjs - это порядок ваших скриптов, если вы используете jquery-ui, это должно быть:
Пробовал и тестировал
var app = angular.module('MyApp', ['mgcrea.ngStrap']);
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/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>
установите зависимости:
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