AngularJS의 부트스트랩 툴팁
Bootstrap 툴팁은 AngularJS 애플리케이션에서 툴팁을 구현하는 데 사용할 수 있는 가장 널리 사용되는 JavaScript 라이브러리 중 하나입니다.
Bootstrap 툴팁은 애니메이션 효과, 위치 지정 및 툴팁 배치와 같은 여러 사용자 정의 기능을 사용자에게 제공하는 오픈 소스 라이브러리입니다.
또한 도구 설명은 일반적으로 작업 방법을 모르거나 특정 작업에 어려움을 겪을 수 있는 사용자에게 도움말과 지침을 제공하는 데 사용됩니다. 이 튜토리얼에서는 AngularJS로 부트스트랩 툴팁을 만드는 방법을 보여줍니다.
부트스트랩 툴팁 플러그인 설치
첫 번째 단계는 웹 페이지에 Bootstrap 툴팁 플러그인과 AngularJS 라이브러리를 추가하는 것입니다. 터미널에서 다음 명령을 실행하여 부트스트랩 플러그인을 설치합니다.
명령:
npm install bootstrap-tooltip --save
HTML에서 부트스트랩 도구 설명 사용
암호:
<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>
여기에 4가지 툴팁을 추가했습니다. 이 도구 설명에 마우스를 가져가면 작은 삼각형이 도구 설명에 대한 몇 가지 추가 정보를 표시합니다.
이것은 비기술적인 사람들을 안내할 최고의 방법입니다. 부트스트랩 툴팁은 AngularJS의 도움으로 툴팁이 필요한 모든 프로젝트에서 사용할 수 있습니다.
여기를 클릭 위에서 언급한 코드의 완전한 작동을 확인하십시오.
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