Bootstrap Tooltip en AngularJS
L’info-bulle Bootstrap est l’une des bibliothèques JavaScript les plus populaires qui peuvent être utilisées pour implémenter des info-bulles dans les applications AngularJS.
L’info-bulle Bootstrap est une bibliothèque open source qui offre aux utilisateurs plusieurs fonctionnalités personnalisables telles que les effets d’animation, le positionnement et le placement de l’info-bulle.
De plus, les info-bulles sont couramment utilisées pour fournir de l’aide et des instructions aux utilisateurs qui ne savent peut-être pas comment faire quelque chose ou qui peuvent avoir des difficultés avec une tâche particulière. Ce tutoriel vous montrera comment créer des info-bulles Bootstrap avec AngularJS.
Installer le plugin d’info-bulle Bootstrap
La première étape consiste à ajouter le plugin d’info-bulle Bootstrap et la bibliothèque AngularJS à votre page Web. Installez le plugin bootstrap en exécutant la commande suivante dans le terminal.
Commande:
npm install bootstrap-tooltip --save
Utiliser l’info-bulle Bootstrap en 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>
Ici, nous avons ajouté quatre info-bulles. Lorsque vous survolez ces info-bulles, un petit triangle vous montrera des informations supplémentaires sur l’info-bulle.
C’est la meilleure méthode qui guidera les personnes non techniques. Bootstrap Tooltip peut être utilisé dans tout projet nécessitant une info-bulle à l’aide d’AngularJS.
Cliquez ici pour vérifier le fonctionnement complet du code comme mentionné ci-dessus.
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