Bootstrap Tooltip
Tooltip display some information about the an element.It is a small popup like box that display the information.When mouse is over the element , Tooltip become visible.For Bootstrap tooltips ,data-toggle="tooltip" attribute need to add on the element.For Bootstrap tooltips , jquery inisialisation is required.
Example
Bootstrap Example
Tooltip display some information about the an element.It is a small popup like box that display the information.When mouse is over the element , Tooltip become visible.For Bootstrap tooltips ,data-toggle="tooltip" attribute need to add on the element.For Bootstrap tooltips , jquery inisialisation is required.
Example
<!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.3.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">
</br>
</br>
</br>
</br>
<button
type="button"
class="btn
btn-default"
data-toggle="tooltip"
title="This
is a default button">Default</button>
</div>
<script>
$(document).ready(function
()
{
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
Output
Tooltips position can be set by adding "data-placement"
Example
Tooltips position can be set by adding "data-placement"
Example
<!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.3.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">
</br>
</br>
</br>
</br>
<button
type="button"
class="btn
btn-default"
data-toggle="tooltip"
title="This
is a default button ,displat at top "
data-placement="top">Display
Top</button>
<button
type="button"
class="btn
btn-default"
data-toggle="tooltip"
title="This
is a default button ,displat at bottom "
data-placement="bottom">Display
Buttom</button>
<button
type="button"
class="btn
btn-default"
data-toggle="tooltip"
title="This
is a default button ,displat at left "
data-placement="left">Display
Left</button>
<button
type="button"
class="btn
btn-default"
data-toggle="tooltip"
title="This
is a default button ,displat at right "
data-placement="right">Display
Right</button>
</div>
<script>
$(document).ready(function
()
{
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
Output
Bootstrap Example
No comments:
Post a Comment