John Smith John Smith - 7 months ago 21
HTML Question

Create Bootstrap Tooltip

I have this short sample:

link

CODE HTML:

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>


asda

link exampe

do not understand why the W3Schools example is different from mine.

I put virtually the same code and have implemented bootstrap library.

Can you please tell me what the problem is and what example shows the two different?

Answer

They are using this code to attain that result unlike your one line of 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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3>Tooltip Example</h3>
  <a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
</div>


</body>
</html>

The important thing to note is this part

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

AND this API:

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

So I used their and found out that when you remove the above javascript code the result is same as yours. So add the above script element to your code and link the bootstrap js library.

To get the tooltip above the text use this code:

<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>

Doing so will give you the same result as there

For more reference use this link

Comments