Bootstrap Tooltip

0 3929

The title attribute specifies the text that should be displayed inside the tooltip. When mouse over on button, then you can display title of top side of button, right of button, left side of button or bottom side of button.

It will works, when your mouse hover on button. For brief understand please copy and paste below example on your website or webpage.

Example:

<!DOCTYPE html>
<html>
<head>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<div class="container">

<button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="top" title="Tooltip top">
Tooltip top
</button>
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="Tooltip right">
Tooltip right
</button>
<button type="button" class="btn btn-danger" data-toggle="tooltip" data-placement="bottom" title="Tooltip bottom">
Tooltip bottom
</button>
<button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip left
</button>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"> </script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
</body>

</html>