AngularJS の Bootstrap ツールチップ

Muhammad Adil 2023年1月30日
  1. BootstrapTooltip プラグインをインストールする
  2. HTML で Bootstrap ツールチップを使用する
AngularJS の Bootstrap ツールチップ

Bootstrap ツールチップは、AngularJS アプリケーションでツールチップを実装するために使用できる最も人気のある JavaScript ライブラリの 1つです。

Bootstrap ツールチップは、アニメーション効果、配置、ツールチップの配置など、いくつかのカスタマイズ可能な機能をユーザーに提供するオープンソースライブラリです。

さらに、ツールチップは一般的に、何かを行う方法を知らないユーザーや特定のタスクに苦労している可能性のあるユーザーにヘルプと指示を提供するために使用されます。このチュートリアルでは、AngularJS を使用して Bootstrap ツールチップを作成する方法を説明します。

BootstrapTooltip プラグインをインストールする

最初のステップは、Bootstrap ツールチッププラグインと AngularJS ライブラリを Web ページに追加することです。ターミナルで次のコマンドを実行して、Bootstrap プラグインをインストールします。

指示:

npm install bootstrap-tooltip --save

HTML で Bootstrap ツールチップを使用する

コード:

<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つのツールチップを追加しました。これらのツールチップにカーソルを合わせると、小さな三角形にツールチップに関する追加情報が表示されます。

これは、技術者以外の人をガイドする最良の方法です。Bootstrap Tooltip は、AngularJS の助けを借りてツールチップを必要とするすべてのプロジェクトで使用できます。

ここをクリックして、上記のコードの完全な動作を確認してください。

著者: Muhammad Adil
Muhammad Adil avatar Muhammad Adil avatar

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

関連記事 - Angular Bootstrap