Bootstrap-Tooltip in AngularJS
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.
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