एक Tooltip एक छोटा Popup होता है जो तब प्रकट होता है जब User Mouse Pointer को एक Element जैसे कि Link या Buttons को संकेत या Element के बारे मे जानकारी प्रदान करते है.
Tooltips आपकी Website के नए Visitors के लिए बहुत उपयोगी हो सकते है. क्योंकि वे User को Mouse Pointer को उनके द्वारा Mouse और Link के उद्देश्य से जान सकते है.
<!DOCTYPE html>
<html>
<head>
<title>Tooltip Plugin Example</title>
<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>
<h4>Tooltip Examples for Buttons</h4>
<button type="button" class="btn btn-default" data-toggle="Tooltip"
title="Tooltip on left">
Default Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="Tooltip"
data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
<button type="button" class="btn btn-default" data-toggle="Tooltip"
data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-default" data-toggle="Tooltip"
data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-default" data-toggle="Tooltip"
data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<script>
$(function () { $("[data-toggle = 'tooltip']").tooltip(); });
</script>
</body>
</html>