How to Create Tooltip using bootstrap and jQuery

sogata (64)in #utopian-io • 8 years ago (edited)

What Will I Learn?

You will learn How to create a tooltip
You will learn Positioning the tooltip

Requirements

You Have Basic about

HTML
CSS
JavaScript

Difficulty

Basic

Tutorial Contents

The Tooltip plugin is small pop-up box that appears when the user moves the mouse pointer over an element. We often meet it, especially on utopian platform. Among the utopian elements that use tooltip is in the editor page that is on tool bold, italic, image, link and qoute. When you move the mouse pointer on that elements, then the small pop-up box will be appear.

To create this part, the bootstrap has provided some attribut that easy to practice. To create this part also need the jQuery to select the specified element and call the tooltip() method. For more detail, Let's take a look the Following Steps :

Create a html file with HTML5 Doctype and don't forget to add the Bootstrap and jQuery CDN, like this :

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    modify the code here . . . . 
</body>
</html>

Create a text, button element or any element you want. For Example I create a text using <a>element. Here the code.

<a href="#">Put Pointer Here</a>

To creata a tooltip you should add the data-toggle="tooltip" attribute and title atribut to specify the text that will appear in tooltip. Like this :

<a href="#" data-toggle="tooltip" title=Tooltip Succes>Put Pointer Here</a>

Save the file and try to run, then move your mouse pointer on the text. The tooltip appear on under the pointer.
To appear the tooltip like toogle we need add the tooltip() jQuery method. add the following Script before </body> . Save and run the file Then look the different then before adding jQuery.

<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
});
</script>

For positioning the tooltip you can add the data-placement attribut with choosing value top, bottom, right and left. Add the following code under your first tooltip code.

<a href="#" data-toggle="tooltip" data-placement="top" title="utopian.io">Top</a></li>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="utopian.io">Bottom</a></li>
<a href="#" data-toggle="tooltip" data-placement="left" title="utopian.io">Left</a></li>
<a href="#" data-toggle="tooltip" data-placement="right" title="utopian.io">Right</a></li>

Finish we have crated 4 positon of tooltip, Run the file to try.

|JSFIDDLE LIVE DEMO|

Here the Full code :

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h3>Creating Tooltip</h3>
  <a href="#" data-toggle="tooltip" title="Tooltip Succes">Put Pointer here</a>
<br>
<h3>Positioning The Tooltip</h3>
<a href="#" data-toggle="tooltip" data-placement="top" title="utopian.io">Top</a></li>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="utopian.io">Bottom</a></li>
<a href="#" data-toggle="tooltip" data-placement="left" title="utopian.io">Left</a></li>
<a href="#" data-toggle="tooltip" data-placement="right" title="utopian.io">Right</a></li>
</div>
<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
});
</script>
</body>
</html>