การใช้ Bootstrap Tooltip กับ AngularJS

ฉันพยายามใช้คำแนะนำเครื่องมือ 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();

อย่างไรก็ตามฉันไม่แน่ใจ แม้ว่าฉันจะเพิ่มบรรทัดด้านบน แต่รหัสของฉันก็ใช้ไม่ได้ ฉันพยายามหลีกเลี่ยงการใช้ UI bootstrap เนื่องจากมีมากกว่าที่ฉันต้องการ อย่างไรก็ตามถ้าฉันต้องใส่แค่ส่วนคำแนะนำเครื่องมือฉันก็จะเปิดให้ แต่ฉันคิดไม่ออกว่าจะทำอย่างไร

ใครช่วยบอกวิธีทำให้ 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 )

ดูเหมือนจะมีคำตอบที่ซับซ้อนมากมายสำหรับคำถามนี้ นี่คือสิ่งที่ใช้ได้ผลสำหรับฉัน

1. ติดตั้ง UI Bootstrap -$ bower install angular-bootstrap

2. ใส่ UI Bootstrap เป็นการพึ่งพา - angular.module('myModule', ['ui.bootstrap']);

3. ใช้คำสั่ง uib-tooltipใน html ของคุณ

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

หากคุณกำลังสร้างแอป Angular คุณสามารถใช้ jQuery ได้ แต่มีเหตุผลดีๆมากมายที่จะพยายามหลีกเลี่ยงเพื่อสนับสนุนกระบวนทัศน์ที่ขับเคลื่อนด้วยเชิงมุมมากกว่า คุณสามารถใช้สไตล์ที่มีให้โดย bootstrap ต่อไป แต่แทนที่ปลั๊กอิน jQuery ด้วยเชิงมุมดั้งเดิมโดยใช้UI Bootstrap

รวมไฟล์ Boostrap CSS, 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']);

จากนั้นคุณสามารถใช้คำสั่งเชิงมุมแทนแอตทริบิวต์ข้อมูลที่ 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

การหลีกเลี่ยง UI Bootstrap

jQuery.min.js (94kb) + Bootstrap.min.js (32kb)นอกจากนี้ยังให้คุณมากกว่าที่คุณต้องการและมากขึ้นกว่าUI-bootstrap.min.js (41 KB)

และเวลาที่ใช้ในการดาวน์โหลดโมดูลเป็นเพียงด้านเดียวของประสิทธิภาพ

ถ้าคุณอยากจะโหลดเฉพาะโมดูลที่คุณจำเป็นคุณสามารถ "สร้างสร้าง" และเลือกคำแนะนำจากเว็บไซต์ 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 ลองใช้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>

ฉันเขียน Angular Directive ที่ใช้งานได้ดีสำหรับเรา

นี่คือตัวอย่าง: http://jsbin.com/tesido/edit?html,js,output

Directive (สำหรับ 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'];
    });
  }
});

หมายเหตุ: หากคุณใช้ Bootstrap 4 ในบรรทัดที่ 6 และ 11 ด้านบนคุณจะต้องแทนที่tooltip('destroy')ด้วยtooltip('dispose')(ขอบคุณuser1191559 สำหรับการอัปเดตนี้ )

เพียงเพิ่มbootstrap-tooltipเป็นแอตทริบิวต์ให้กับองค์ประกอบใด ๆ ด้วยtitle. Angular จะคอยตรวจสอบการเปลี่ยนแปลงtitleแต่จะส่งผ่านคำแนะนำเครื่องมือที่จัดการไปยัง Bootstrap

นอกจากนี้ยังช่วยให้คุณสามารถใช้Bootstrap Tooltip Optionsเป็นdata-แอตทริบิวต์ใน Bootstrap แบบปกติ

มาร์กอัป :

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

เห็นได้ชัดว่านี่ไม่ได้มีการเชื่อมโยงที่ซับซ้อนและการรวมขั้นสูงทั้งหมดที่ AngularStrap และ UI Bootstrap นำเสนอ แต่เป็นทางออกที่ดีหากคุณใช้ Bootstrap's JS ในแอป Angular อยู่แล้วและคุณเพียงแค่ต้องการสะพานคำแนะนำเครื่องมือพื้นฐานในแอปทั้งหมดของคุณโดยไม่ต้อง การปรับเปลี่ยนคอนโทรลเลอร์หรือการจัดการเหตุการณ์ของเมาส์

คุณสามารถใช้selector ตัวเลือกสำหรับแอปพลิเคชันหน้าเดียวแบบไดนามิก:

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

หากมีการระบุตัวเลือกอ็อบเจ็กต์คำแนะนำเครื่องมือจะถูกมอบหมายให้กับเป้าหมายที่ระบุ ในทางปฏิบัติสิ่งนี้ใช้เพื่อเปิดใช้งานเนื้อหา HTML แบบไดนามิกเพื่อเพิ่มคำแนะนำเครื่องมือ

คุณสามารถสร้างคำสั่งง่ายๆดังนี้:

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

จากนั้นเพิ่มคำสั่งที่กำหนดเองของคุณในกรณีที่จำเป็น:

<button my-tooltip></button>

คุณสามารถทำได้ด้วยAngularStrapซึ่ง

เป็นชุดคำสั่งเนทีฟที่ช่วยให้สามารถผสานรวม Bootstrap 3.0+ เข้ากับแอพ AngularJS 1.2+ ของคุณได้อย่างราบรื่น "

คุณสามารถฉีดไลบรารีทั้งหมดได้ดังนี้:

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

หรือดึงคุณลักษณะคำแนะนำเครื่องมือเช่นนี้เท่านั้น:

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

การสาธิตใน Stack Snippets

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();ตัวควบคุมที่เกี่ยวข้อง

โปรดจำไว้อย่างหนึ่งหากคุณต้องการใช้คำแนะนำเครื่องมือ bootstrap ใน angularjs คือลำดับของสคริปต์ของคุณหากคุณใช้ jquery-ui ด้วยเช่นกันควรเป็น:

• jQuery
• jQuery UI
• Bootstap

มีการทดลองและทดสอบ

อ่านสิ่งนี้เฉพาะเมื่อคุณกำหนดคำแนะนำเครื่องมือแบบไดนามิก

กล่าวคือ <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คุณสมบัติ (บางครั้ง) เมื่อฉันเปิดใช้งานคำแนะนำ อย่างไรก็ตามเมื่อฉัน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 ms) เพื่อให้วงจรการย่อยเสร็จสมบูรณ์และtitleจะอัปเดต s
• หากมีtitleคุณสมบัติที่ไม่ว่างเปล่า (กล่าวคือมีการเปลี่ยนแปลง) ให้คัดลอกไปยังdata-original-titleคุณสมบัตินั้นจึงจะถูกหยิบขึ้นมาโดย Toolips ของ Bootstrap
• เปิดใช้งานคำแนะนำเครื่องมืออีกครั้ง

หวังว่าคำตอบยาว ๆ นี้จะช่วยให้ใครบางคนที่อาจกำลังลำบากเหมือนฉัน

ลองใช้คำแนะนำเครื่องมือ (ui.bootstrap.tooltip) ดูคำสั่งเชิงมุมสำหรับ Bootstrap

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

ขอแนะนำให้หลีกเลี่ยงโค้ด JavaScript ที่ด้านบนของ AngularJS

สำหรับการเดินทางคำแนะนำในการฟื้นฟูเมื่อรูปแบบการเปลี่ยนแปลงฉันเพียงแค่ใช้แทนdata-original-titletitle

เช่น

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

โปรดทราบว่าฉันกำลังเริ่มต้นการใช้คำแนะนำเครื่องมือเช่นนี้:

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

เวอร์ชัน:

• AngularJS 1.4.10
• bootstrap 3.1.1
• jquery: 1.11.0

AngularStrap ไม่ทำงานใน IE8 กับ angularjs เวอร์ชัน 1.2.9 ดังนั้นอย่าใช้สิ่งนี้หากแอปพลิเคชันของคุณต้องการรองรับ IE8

impproving @aStewartDesign คำตอบ:

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

ไม่จำเป็นต้องใช้ jquery มันเป็นผู้ที่มาสาย แต่ฉันคิดว่าเป็นคนที่ได้รับการโหวตสูงสุดฉันควรชี้ให้เห็นสิ่งนี้

ติดตั้งการอ้างอิง:

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

จากนั้นสร้างสคริปต์ js

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

ตอนนี้รีสตาร์ทเซิร์ฟเวอร์ของคุณ

เนื่องจากฟังก์ชั่นคำแนะนำเครื่องมือคุณต้องบอก angularJS ว่าคุณใช้ jQuery

นี่คือคำสั่งของคุณ:

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

และนี่คือวิธีใช้คำสั่ง:

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