AngularJS 中的 Bootstrap Tooltip

Muhammad Adil 2023年1月30日

Angular Angular Bootstrap

安裝 Bootstrap Tooltip 外掛
在 HTML 中使用 Bootstrap Tooltip

Bootstrap Tooltip 是最流行的 JavaScript 庫之一，可用於在 AngularJS 應用程式中實現 Tooltip。

Bootstrap Tooltip 是一個開源庫，它為使用者提供了一些可自定義的功能，如動畫效果、定位和 Tooltip 放置。

此外，Tooltip 通常用於為可能不知道如何做某事或可能正在為特定任務苦苦掙扎的使用者提供幫助和說明。本教程將向你展示如何使用 AngularJS 建立 Bootstrap Tooltip。

第一步是將 Bootstrap Tooltip 外掛和 AngularJS 庫新增到你的網頁。通過在終端中執行以下命令來安裝引導外掛。

命令：

npm install bootstrap-tooltip --save

程式碼：

<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.min.js"></script>
<body>
<div ng-app="myApp">
  <h1> AngularJS Tooltip Example </h2>
  <div class="container">
     <button tooltip-placement="right" uib-tooltip="you are in the right tooltip">Tooltip Right</button>
     <br>
     <br>
    <button tooltip-placement="left" uib-tooltip="You are in the left tooltip">Tooltip Left</button>
    <br>
    <br>
    <button  tooltip-placement="bottom" uib-tooltip="you are in the bottom tooltip">Tooltip Bottom</button>
    <br>
    <br>
    <button " tooltip-placement="top" uib-tooltip="you are in the top tooltip">Tooltip Top</button>
  </div>
</div>
<script>
var app = angular.module('myApp', ['ui.bootstrap']);
</script>
</body>
</html>

在這裡，我們新增了四個 Tooltip。當你將滑鼠懸停在這些 Tooltip 上時，一個小三角形將向你顯示有關 Tooltip 的一些附加資訊。

這是指導非技術人員的最佳方法。在 AngularJS 的幫助下，Bootstrap Tooltip 可用於任何需要 Tooltip 的專案。

單擊此處檢查上述程式碼的完整工作。

作者： Muhammad Adil

Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.

Facebook

安裝 Bootstrap Tooltip 外掛

在 HTML 中使用 Bootstrap Tooltip