Bootstrap Tooltip en AngularJS
- Instalar el complemento de información sobre herramientas de Bootstrap
- Use la información sobre herramientas de Bootstrap en HTML
La información sobre herramientas de Bootstrap es una de las bibliotecas de JavaScript más populares que se puede usar para implementar información sobre herramientas en aplicaciones AngularJS.
La información sobre herramientas de Bootstrap es una biblioteca de código abierto que brinda a los usuarios varias funciones personalizables, como efectos de animación, posicionamiento y colocación de información sobre herramientas.
Además, la información sobre herramientas se usa comúnmente para brindar ayuda e instrucciones a los usuarios que pueden no saber cómo hacer algo o que pueden tener dificultades con una tarea en particular. Este tutorial le mostrará cómo crear información sobre herramientas de Bootstrap con AngularJS.
Instalar el complemento de información sobre herramientas de Bootstrap
El primer paso es agregar el complemento de información sobre herramientas Bootstrap y la biblioteca AngularJS a su página web. Instale el complemento de arranque ejecutando el siguiente comando en la terminal.
Dominio:
npm install bootstrap-tooltip --save
Use la información sobre herramientas de Bootstrap en HTML
Código:
<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>
Aquí agregamos cuatro información sobre herramientas. Cuando se desplaza sobre esta información sobre herramientas, un pequeño triángulo le mostrará información adicional sobre la información sobre herramientas.
Este es el mejor método que guiará a las personas no técnicas. Bootstrap Tooltip se puede usar en cualquier proyecto que necesite una información sobre herramientas con la ayuda de AngularJS.
Haga clic aquí para verificar el funcionamiento completo del código como se mencionó anteriormente.
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