HOWTO · Angular

Bootstrap-Tooltip in AngularJS

Bootstrap Tooltip ist eine Open-Source-Bibliothek, die ihren Benutzern eine Reihe anpassbarer Funktionen wie Animationseffekte, Positionierung und Platzierung des Tooltip bietet.

Von Muhammad AdilVeröffentlicht 2022-05-23Aktualisiert 2022-05-23

Der Bootstrap-Tooltip ist eine der beliebtesten JavaScript-Bibliotheken, die zum Implementieren von Tooltips in AngularJS-Anwendungen verwendet werden können.

Bootstrap-Tooltip ist eine Open-Source-Bibliothek, die Benutzern mehrere anpassbare Funktionen wie Animationseffekte, Positionierung und Tooltip-Platzierung bietet.

Darüber hinaus werden QuickInfos häufig verwendet, um Hilfe und Anweisungen für Benutzer bereitzustellen, die möglicherweise nicht wissen, wie etwas zu tun ist, oder die möglicherweise mit einer bestimmten Aufgabe zu kämpfen haben. Dieses Tutorial zeigt Ihnen, wie Sie Bootstrap-Tooltips mit AngularJS erstellen.

Installieren Sie das Bootstrap-Tooltip-Plugin

Der erste Schritt besteht darin, das Bootstrap-Tooltip-Plugin und die AngularJS-Bibliothek zu Ihrer Webseite hinzuzufügen. Installieren Sie das Bootstrap-Plugin, indem Sie den folgenden Befehl im Terminal ausführen.

Befehl:

npm install bootstrap-tooltip --save

Verwendung von den Bootstrap-Tooltip in HTML

Code:

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

Hier haben wir vier Tooltips hinzugefügt. Wenn Sie den Mauszeiger über diese QuickInfos bewegen, zeigt Ihnen ein kleines Dreieck einige zusätzliche Informationen über die QuickInfos an.

Dies ist die beste Methode, um nicht-technische Menschen anzuleiten. Bootstrap Tooltip kann in jedem Projekt verwendet werden, das einen Tooltip mit Hilfe von AngularJS benötigt.

Klicken Sie hier, um die vollständige Funktion des Codes wie oben erwähnt zu überprüfen.

Über den Autor

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.

Autorenprofil ansehen
Facebook