How to use complex HTML with twitter Bootstrap tooltip using jQuery ?
The Bootstrap Tooltip gives us a hint about the specific element in a graphical manner. Tooltip is used for performance reasons so it can be customized as per the requirement domain. Tooltip is implemented using javascript, it relies on a 3rd party library known as popper.js for positioning purposes.
It works on the concept of hover-over using the cursor pointer when the pointer hovers on the element a hint may pop/arise in any 4 directions (left, right, up, and down) as directed in the code.
Some general examples:
- In a SignIn Page, the Password tooltip pops the requirement such as it should be 8 characters long, start with Capital letter, etc.
- For the name it may pop that only first name and no the middle or last name has to be typed.
The Snippet of JavaScript
// Write Javascript code here
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
Note: HTML, CSS, Bootstrap, JavaScript and jQuery is used.
- Method 1: The below implementation is done for 4 buttons left, right, up and down and their respective tooltips which indicate the position of the buttons respectively when the cursor hovers over the buttons.
html
<!DOCTYPE html>
< html >
< head >
< meta name="viewport" content=
" width = device -width, initial-scale = 1 .0" />
< title >
HTML with twitter Bootstrap
tooltip using jQuery
</ title >
< link rel="stylesheet" href=
integrity=
"sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
< script src=
</ script >
< script src=
integrity=
"sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous">
</ script >
< script type="text/javascript">
$(document).ready(function() {
$("#toptip").tooltip({
placement: "top"
});
$("#bottomtip").tooltip({
placement: "bottom"
});
$("#lefttip").tooltip({
placement: "left"
});
$("#righttip").tooltip({
placement: "right"
});
});
</ script >
</ head >
< body >
< center >
< div class="container">
< h1 >< u >Bootstrap Tooltip Demo</ u ></ h1 >
< br />< br />
< div >
< button type="button" id="toptip"
class="btn btn-danger"
title="A Tooltip with Top placement">
Top Tooltip demo
</ button >
< br >< br >
< button type="button" id="bottomtip"
class="btn btn-info"
title="A Tooltip with Bottom placement">
Bottom Tooltip demo
</ button >
< br >< br >
< button type="button" id="lefttip"
class="btn btn-success"
title="A Tooltip with Left placement">
Left Tooltip demo
</ button >
< br >< br >
< button type="button" id="righttip"
class="btn btn-warning"
title="A Tooltip with Right placement">
Right Tooltip demo
</ button >
</ div >
</ body >
</ html >
|
Output:
- Method 2: The Below Implementation is a Sign-up page with tooltips for giving tips/ recommendation. The form tag in the HTML is used to create a form and the tooltip attributes are added accordingly.
html
<!DOCTYPE html>
< html >
< head >
< title >Bootstrap Grid</ title >
< link rel="stylesheet"
href=
< link rel="stylesheet"
href=
< script src=
</ script >
< script src=
</ script >
< script type="text/javascript">
$(document).ready(function() {
$('#name').tooltip({
'trigger': 'focus',
'title': 'Name is Required'
});
$('#email').tooltip({
'trigger': 'focus',
'title': 'Email is Required'
});
$('#password').tooltip({
'trigger': 'focus',
'title': "Password is Required"
});
});
</ script >
< style >
.serif {
font-family: "Times New Roman", Times, serif;
}
p {
padding: 20px;
}
</ style >
</ head >
< body >
< h1 >< p class="serif">Sign Up Sample Page</ p ></ h1 >
< div class="container" style="padding:50px;">
< form role="form">
< div class="form-group">
< label for="firstname">Name</ label >
< input type="text"
name="Name"
class="form-control"
id="name"
placeholder="Enter Name">
</ div >
< div class="form-group">
< label for="email">Email</ label >
< input type="text"
name="email"
class="form-control"
id="email"
placeholder="Enter email">
</ div >
< div class="form-group">
< label for="Password">Password</ label >
< input type="password"
name="password"
class="form-control"
id="password"
placeholder="Enter Password">
</ div >
</ form >
</ div >
</ body >
</ html >
|
Output:
Last Updated :
10 Apr, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...