AngularJS ile Bootstrap Araç İpucunu Kullanma

Bir uygulamamda Bootstrap araç ipucunu kullanmaya çalışıyorum. Uygulamam AngularJS kullanıyor Şu anda aşağıdakilere sahibim:

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

Sanırım kullanmam gerek

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

Ancak emin değilim. Yine de yukarıdaki satırı eklediğimde bile kodum çalışmıyor. İhtiyacım olandan daha fazlasını içerdiği için UI önyükleme kullanmaktan kaçınmaya çalışıyorum. Ancak, sadece araç ipucu parçasını eklemem gerekirse, buna açık olurdum. Yine de bunu nasıl yapacağımı çözemiyorum.

Birisi bana Bootstrap Tooltip'in AngularJS ile nasıl çalıştığını gösterebilir mi?

Araç ipuçlarının ilk etapta çalışmasını sağlamak için, bunları kodunuzda başlatmanız gerekir. AngularJS'yi bir saniyeliğine yok sayarsak, jQuery'de çalışmak için araç ipuçlarını şu şekilde elde edersiniz:

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

Bu, içerik Angular tarafından oluşturulmadığı sürece bir AngularJS uygulamasında da çalışacaktır (örneğin: ng-tekrar). Bu durumda, bunun üstesinden gelmek için bir yönerge yazmanız gerekir. İşte benim için işe yarayan basit bir yönerge:

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

Ardından tek yapmanız gereken, araç ipucunun görünmesini istediğiniz öğeye "araç ipucu" niteliğini eklemek:

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

Umarım yardımcı olur!

Bulabildiğim en iyi çözüm, öğenize aşağıdaki gibi bir "onmouseenter" niteliği eklemektir:

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

Basit Cevap - UI Bootstrap ( ui.bootstrap.tooltip ) kullanma

Bu soruya çok karmaşık cevaplar var gibi görünüyor. İşte benim için işe yarayan şey.

1. UI Bootstrap'i yükleyin -$ bower install angular-bootstrap

2. UI Bootstrap'i bağımlılık olarak enjekte edin - angular.module('myModule', ['ui.bootstrap']);

3. Html'nizde uib-tooltip yönergesini kullanın .

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

Bir Açısal uygulama oluşturmaya ediyorsanız yapabilirsiniz jQuery kullanabilirsiniz, ancak daha köşeli tahrik paradigmaların lehine bunu önlemek için denemek için iyi nedenler bir çok şey var. Bootstrap tarafından sağlanan stilleri kullanmaya devam edebilirsiniz, ancak UI Bootstrap kullanarak jQuery eklentilerini yerel açısal ile değiştirebilirsiniz.

Boostrap CSS dosyalarını, Angular.js ve ui.Bootstrap.js'yi dahil edin:

<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.bootstrapModülünüzü böyle oluştururken enjekte ettiğinizden emin olun :

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

Daha sonra jQuery tarafından alınan veri öznitelikleri yerine açısal yönergeleri kullanabilirsiniz:

<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'da Demo

UI Önyüklemesinden Kaçınma

jQuery.min.js (94kb) + Bootstrap.min.js (32kb) de size ihtiyacınız olandan fazlasını ve ui-bootstrap.min.js'den (41kb) çok daha fazlasını sunar .

Modülleri indirmek için harcanan zaman, performansın yalnızca bir yönüdür.

Yalnızca ihtiyacınız olan modülleri gerçekten yüklemek istiyorsanız, "Bir Yapı Oluşturun" ve Bootstrap-UI web sitesinden araç ipuçlarını seçebilirsiniz . Veya araç ipuçları için kaynak kodunu keşfedebilir ve neye ihtiyacınız olduğunu seçebilirsiniz.

Burada yalnızca araç ipuçları ve şablonlarla (6kb) küçültülmüş bir özel yapı

Bootstrap JS ve jQuery'yi dahil ettiniz mi?

<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>

Bunları zaten yüklemediyseniz, Angular UI ( http://angular-ui.github.io/bootstrap/ ) fazla yük oluşturmayabilir. Bunu Angular uygulamamla kullanıyorum ve bir Araç İpucu yönergesi var. Kullanmayı denetooltip="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>

Bizim için iyi çalışan basit bir Açısal Yönerge yazdım.

İşte bir demo: http://jsbin.com/tesido/edit?html,js,output

Direktif (Bootstrap 3 için) :

// 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's text (prevents empty tooltips)
      if (jQuery.trim(title)) element.tooltip();
    })
    element.on('$destroy', function() {
      element.tooltip('destroy');
      delete attrs.$$observers['title'];
    });
  }
});

Not: değiştirmeniz gerekir hatları 6 & yukarıda 11, Bootstrap 4 kullanıyorsanız tooltip('destroy')ile tooltip('dispose')(karşı teşekkür bu upadate için user1191559 )

Basitçe bootstrap-tooltipherhangi bir öğeye öznitelik olarak ekleyin title. Angular, üzerinde yapılan değişiklikleri titleizler ancak aksi takdirde araç ipucu işlemeyi Bootstrap'e aktarır.

Bu ayrıca, yerel Bootstrap Tooltip Seçeneklerinden herhangi birini data-normal Bootstrap biçiminde öznitelikler olarak kullanmanıza olanak tanır .

İşaretleme :

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

Açıkçası, bu, AngularStrap ve UI Bootstrap'in sunduğu tüm ayrıntılı bağlamalara ve gelişmiş entegrasyona sahip değildir, ancak Angular uygulamanızda Bootstrap'ın JS'sini zaten kullanıyorsanız ve uygulamanızın tamamında basit bir araç ipucu köprüsüne ihtiyacınız varsa, bu iyi bir çözümdür. denetleyicileri değiştirmek veya fare olaylarını yönetmek.

Dinamik tek sayfalı uygulamalar için selector seçeneği kullanabilirsiniz :

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

bir seçici sağlanırsa, araç ipucu nesneleri belirtilen hedeflere delege edilecektir. Pratikte bu, dinamik HTML içeriğinin araç ipuçlarının eklenmesini sağlamak için kullanılır.

Bunun gibi basit bir yönerge oluşturabilirsiniz:

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

Ardından, gerekli olan yere özel direktifinizi ekleyin:

<button my-tooltip></button>

Bunu AngularStrap ile yapabilirsiniz .

Bootstrap 3.0+ ile AngularJS 1.2+ uygulamanıza sorunsuz entegrasyon sağlayan bir dizi yerel yönergedir. "

Tüm kütüphaneyi şu şekilde enjekte edebilirsiniz:

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

Veya sadece araç ipucu özelliğini şu şekilde çekin:

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

Yığın Parçacıklarında Demo

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>

en kolay yol, $("[data-toggle=tooltip]").tooltip();ilgili denetleyiciye ekleyin .

Angularjs'de önyükleme araç ipucunu kullanmak istiyorsanız, jquery-ui kullanıyorsanız, komut dosyalarınızın sırası olduğunu lütfen unutmayın, şöyle olmalıdır:

• jQuery
• jQuery kullanıcı arayüzü
• Önyükleme

Denendi ve test edildi

Bunu yalnızca araç ipuçlarını dinamik olarak atıyorsanız okuyun

yani <div tooltip={{ obj.somePropertyThatMayChange }} ...></div>

Görünümle her zaman güncellenmeyen dinamik araç ipuçları ile ilgili bir sorun yaşadım. Örneğin, şöyle bir şey yapıyordum:

Bu tutarlı bir şekilde çalışmadı

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

Ve bunu şu şekilde aktive etmek:

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

Ancak, insanlar dizilim değişeceğinden, ipuçlarım her zaman güncellenmez. Bu konudaki her düzeltmeyi ve diğerlerini şanssız olarak denedim. Aksaklık, zamanın sadece% 5'inde oluyor gibiydi ve tekrar etmesi neredeyse imkansızdı.

Ne yazık ki, bu ipuçları projem için kritik öneme sahip ve yanlış bir araç ipucu göstermek çok kötü olabilir.

Sorun ne gibi görünüyordu

Bootstrap değerini kopyalayarak edildi titleyeni özelliğin mülk, data-original-titleve kaldırma titleözelliği (bazen) Ben toooltips aktive ne zaman. Ancak, title={{ person.tooltip }}yeni değeri değiştirdiğimde, her zaman mülke güncellenmez data-original-title. Araç ipuçlarını devre dışı bırakmayı ve yeniden etkinleştirmeyi, yok etmeyi, bu mülke doğrudan bağlamayı ... her şeyi denedim. Ancak bunların her biri ya işe yaramadı ya da yeni sorunlar yarattı; nesnemden hem kaldırılan hem de bağlanmayan titleve data-original-titleöznitelikleri gibi .

Ne işe yaradı

Belki de şimdiye kadar bastırdığım en çirkin kod, ancak bu küçük ama önemli sorunu benim için çözdü. Araç ipucu yeni verilerle her güncellendiğinde bu kodu çalıştırırım:

$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);

Aslında burada olan şey şudur:

• Özet döngüsünün tamamlanması ve titlee-postaların güncellenmesi için biraz bekleyin (1500 ms) .
• titleBoş olmayan bir özellik varsa (yani değişmişse), onu data-original-titleözelliğe kopyalayın, böylece Bootstrap'in araçları tarafından alınacaktır.
• Araç ipuçlarını yeniden etkinleştirin

Umarım bu uzun cevap benim gibi mücadele eden birine yardımcı olur.

Araç İpucunu (ui.bootstrap.tooltip) deneyin. Bootstrap için Angular yönergelerine bakın

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

AngularJS'nin üst kısmındaki JavaScript kodundan kaçınmanız önerilir.

model değiştiğinde yenilenecek araç ipuçları almak için data-original-titlebunun yerine kullanıyorum title.

Örneğin

<i class="fa fa-gift" data-toggle="tooltip" data-html="true" data-original-title={{getGiftMessage(gift)}} ></i>

şu gibi araç ipuçlarının kullanımını başlattığıma dikkat edin:

<script type="text/javascript">
    $(function () {
        $("body").tooltip({ selector: '[data-toggle=tooltip]' });
    })
</script>

sürümler:

• AngularJS 1.4.10
• bootstrap 3.1.1
• jquery: 1.11.0

AngularStrap, IE8'de angularjs sürüm 1.2.9 ile çalışmaz, bu nedenle uygulamanızın IE8'i desteklemesi gerekiyorsa bunu kullanmayın

@aStewartDesign yanıtını iyileştirme:

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

Jquery'ye gerek yok, bu geç bir cevaplayıcı ama anladım ki en çok oy alan kişi, buna işaret etmeliyim.

bağımlılıkları yükleyin:

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

daha sonra, angular-cli.json dosyanıza komut dosyaları ekleyin

"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"
    ]

ardından bir script.js oluşturun

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

şimdi sunucunuzu yeniden başlatın.

Araç ipucu işlevi nedeniyle, jQuery kullandığınızı angularJS'ye söylemeniz gerekir.

Bu sizin direktifiniz:

myApp.directive('tooltip', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('mouseenter', function () {
                jQuery.noConflict();
                (function ($) {
                    $(element[0]).tooltip('show');
                })(jQuery);
            });
        }
    };
});

ve direktif şu şekilde kullanılır:

<a href="#" title="ToolTip!" data-toggle="tooltip" tooltip></a>