Menggunakan Tooltip Bootstrap dengan AngularJS

Saya mencoba menggunakan tooltip Bootstrap di aplikasi saya. Aplikasi saya menggunakan AngularJS Saat ini, saya memiliki yang berikut ini:

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

Saya pikir saya perlu menggunakan

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

Namun, saya tidak yakin. Meskipun saya menambahkan baris di atas, kode saya tidak berfungsi. Saya mencoba untuk menghindari penggunaan bootstrap UI karena memiliki lebih dari yang saya butuhkan. Namun, jika saya harus memasukkan hanya bagian tooltip, saya akan terbuka untuk itu. Namun, saya tidak tahu bagaimana melakukan itu.

Dapatkah seseorang menunjukkan kepada saya cara membuat Tooltip Bootstrap bekerja dengan AngularJS?

Agar tooltips berfungsi di tempat pertama, Anda harus menginisialisasinya dalam kode Anda. Mengabaikan AngularJS sebentar, berikut adalah bagaimana Anda akan mendapatkan tooltips untuk bekerja di jQuery:

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

Ini juga akan bekerja di aplikasi AngularJS selama itu bukan konten yang dirender oleh Angular (misalnya: ng-repeat). Dalam hal ini, Anda perlu menulis arahan untuk menangani ini. Berikut petunjuk sederhana yang berhasil untuk saya:

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

Kemudian yang harus Anda lakukan adalah menyertakan atribut "tooltip" pada elemen tempat Anda ingin tooltip muncul:

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

Semoga membantu!

Solusi terbaik yang dapat saya temukan adalah dengan menyertakan atribut "onmouseenter" pada elemen Anda seperti ini:

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

Jawaban Sederhana - menggunakan UI Bootstrap ( ui.bootstrap.tooltip )

Tampaknya ada banyak jawaban yang sangat kompleks untuk pertanyaan ini. Inilah yang berhasil untuk saya.

1. Instal UI Bootstrap -$ bower install angular-bootstrap

2. Inject UI Bootstrap sebagai dependensi - angular.module('myModule', ['ui.bootstrap']);

3. Gunakan direktif uib-tooltip di html Anda.

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

Jika Anda membuat aplikasi Angular, Anda dapat menggunakan jQuery, tetapi ada banyak alasan bagus untuk mencoba menghindarinya demi paradigma yang lebih berorientasi sudut. Anda dapat terus menggunakan gaya yang disediakan oleh bootstrap, tetapi mengganti plugin jQuery dengan sudut asli dengan menggunakan UI Bootstrap

Sertakan file Boostrap CSS, Angular.js, dan 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>

Pastikan Anda telah menginjeksi ui.bootstrapsaat Anda membuat modul seperti ini:

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

Kemudian Anda dapat menggunakan arahan sudut daripada atribut data yang diambil oleh 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>

Demo di Plunker

Menghindari Bootstrap UI

jQuery.min.js (94kb) + Bootstrap.min.js (32kb) juga memberi Anda lebih dari yang Anda butuhkan, dan lebih dari ui-bootstrap.min.js (41kb) .

Dan waktu yang dihabiskan untuk mengunduh modul hanyalah salah satu aspek kinerja.

Jika Anda benar-benar hanya ingin memuat modul yang Anda butuhkan, Anda dapat "Membuat Build" dan memilih tooltips dari situs web Bootstrap-UI . Atau Anda dapat menjelajahi kode sumber untuk tooltips dan memilih apa yang Anda butuhkan.

Di sini sebuah custom build yang diperkecil hanya dengan tooltips dan template (6kb)

Sudahkah Anda menyertakan Bootstrap JS dan 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>

Jika Anda belum memuatnya, maka Angular UI ( http://angular-ui.github.io/bootstrap/ ) mungkin tidak terlalu berlebihan. Saya menggunakannya dengan aplikasi Angular saya, dan itu memiliki petunjuk Tooltip. Coba gunakantooltip="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>

Saya menulis Angular Directive sederhana yang telah bekerja dengan baik untuk kami.

Berikut demonya: http://jsbin.com/tesido/edit?html,js,output

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

Catatan: Jika Anda menggunakan Bootstrap 4, pada baris 6 & 11 di atas Anda harus mengganti tooltip('destroy')dengan tooltip('dispose')(Terima kasih kepada pengguna1191559 untuk pembaruan ini )

Cukup tambahkan bootstrap-tooltipsebagai atribut ke elemen apa pun dengan a title. Angular akan memantau perubahan pada titletetapi sebaliknya meneruskan penanganan tooltip ke Bootstrap.

Ini juga memungkinkan Anda untuk menggunakan salah satu Opsi Tooltip Bootstrap asli sebagai data-atribut dengan cara Bootstrap normal.

Markup :

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

Jelas ini tidak memiliki semua binding yang rumit & integrasi lanjutan yang ditawarkan AngularStrap dan UI Bootstrap, tetapi ini adalah solusi yang baik jika Anda sudah menggunakan JS Bootstrap di aplikasi Angular Anda dan Anda hanya memerlukan tooltip bridge dasar di seluruh aplikasi Anda tanpa memodifikasi pengontrol atau mengelola acara mouse.

Anda dapat menggunakan selector opsi untuk aplikasi halaman tunggal dinamis:

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

jika pemilih disediakan, objek tooltip akan didelegasikan ke target yang ditentukan. Dalam praktiknya, ini digunakan untuk mengaktifkan konten HTML dinamis untuk ditambahkan keterangan alat.

Anda dapat membuat arahan sederhana seperti ini:

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

Kemudian, tambahkan arahan khusus Anda jika diperlukan:

<button my-tooltip></button>

Anda dapat melakukan ini dengan AngularStrap yang

adalah sekumpulan arahan asli yang memungkinkan integrasi Bootstrap 3.0+ tanpa hambatan ke aplikasi AngularJS 1.2+ Anda. "

Anda dapat memasukkan seluruh pustaka seperti ini:

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

Atau hanya tarik fitur tooltip seperti ini:

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

Demo dalam Stack Snippet

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>

cara termudah, tambahkan $("[data-toggle=tooltip]").tooltip();ke pengontrol yang bersangkutan.

Harap diingat satu hal jika Anda ingin menggunakan tooltip bootstrap di angularjs adalah urutan skrip Anda jika Anda juga menggunakan jquery-ui, itu harus:

• jQuery
• jQuery UI
• Bootstap

Itu sudah dicoba dan diuji

Baca ini hanya jika Anda menetapkan tooltips secara dinamis

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

Saya memiliki masalah dengan tooltips dinamis yang tidak selalu diperbarui dengan tampilan. Misalnya, saya melakukan sesuatu seperti ini:

Ini tidak berhasil secara konsisten

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

Dan mengaktifkannya sebagai:

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

Namun, karena array orang saya akan mengubah tooltips saya tidak selalu diperbarui. Saya mencoba setiap perbaikan di utas ini dan yang lainnya tidak berhasil. Glitch tampaknya hanya terjadi sekitar 5% dari waktu, dan hampir tidak mungkin terulang.

Sayangnya, keterangan alat ini sangat penting untuk proyek saya, dan menunjukkan keterangan alat yang salah bisa sangat buruk.

Apa yang tampaknya menjadi masalahnya

Bootstrap menyalin nilai titleproperti ke atribut baru, data-original-titledan menghapus titleproperti (kadang-kadang) ketika saya akan mengaktifkan toooltips. Akan tetapi, bila saya title={{ person.tooltip }}mau merubah nilai baru tidak akan selalu dimutakhirkan menjadi property data-original-title. Saya mencoba menonaktifkan tooltips dan mengaktifkannya kembali, menghancurkannya, mengikat properti ini secara langsung ... semuanya. Namun masing-masing tidak berhasil atau menimbulkan masalah baru; seperti atribut titledan data-original-titlekeduanya dihapus dan dilepas dari objek saya.

Apa yang berhasil

Mungkin kode paling jelek yang pernah saya dorong, tetapi itu memecahkan masalah kecil tapi substansial ini bagi saya. Saya menjalankan kode ini setiap kali tooltip diperbarui dengan data baru:

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

Apa yang terjadi di sini pada dasarnya adalah:

• Tunggu beberapa saat (1500 ms) hingga siklus intisari selesai, dan titles akan diperbarui.
• Jika ada titleproperti yang tidak kosong (yaitu telah berubah), salin ke data-original-titleproperti tersebut agar dapat diambil oleh toolips Bootstrap.
• Aktifkan kembali keterangan alat

Semoga jawaban panjang ini membantu seseorang yang mungkin berjuang seperti saya.

Coba Tooltip (ui.bootstrap.tooltip). Lihat arahan Angular untuk Bootstrap

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

Disarankan untuk menghindari kode JavaScript di atas AngularJS

untuk mendapatkan tooltips untuk menyegarkan ketika perubahan model , saya hanya menggunakan data-original-titlebukan title.

misalnya

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

perhatikan bahwa saya menginisialisasi penggunaan tooltips seperti ini:

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

versi:

• AngularJS 1.4.10
• bootstrap 3.1.1
• jquery: 1.11.0

AngularStrap tidak berfungsi di IE8 dengan angularjs versi 1.2.9 jadi jangan gunakan ini jika aplikasi Anda perlu mendukung IE8

impproving @aStewartDesign jawaban:

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

Tidak perlu jquery, ini jawaban yang terlambat tetapi saya pikir karena adalah yang paling banyak dipilih, saya harus menunjukkan ini.

instal dependensi:

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

selanjutnya, tambahkan skrip di angular-cli.json Anda

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

lalu, buat script.js

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

sekarang restart server Anda.

Karena fungsi tooltip, Anda harus memberi tahu angularJS bahwa Anda menggunakan jQuery.

Ini adalah arahan Anda:

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

dan inilah cara menggunakan arahan:

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