Tooltips and Modals

Objectives and Outcomes

In this exercise we will examine how to add tooltips to a web page. In addition we
look at adding modals to a web page. At the end of this exercise, you will be able
to:

 Add tooltips to a web page

 Add modals that are revealed when the user clicks on a link or a button in the
web page.

Adding a Tooltip

 Let us now switch to the index.html page. We will now add a tooltip to this page.
The tooltip will be added to the "Reserve Table" button that is in the jumbotron.
We will update the <a> tag for the button as follows:

<a role="button" class="btn btn-block nav-link btn-warning"

data-toggle="tooltip" data-html="true" title="Or Call us at <br><stro

ng>+852 12345678</strong>"

data-placement="bottom" href="#reserveform">Reserve Table</a>

As you can see from the code, we add a data-toggle, data-placement and a title
attribute to the <a> tag in order to introduce a tooltip.

 The tooltip needs to be activated by adding a small Javascript code to the

bottom of the page as follows:

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

This script is added right after the line that imports the bootstrap.min.js file.

Adding a Modal

 In the next step we introduce the modal to the web page. To set up the modal,
add the following code right after the navbar at the top of the page.

<div id="loginModal" class="modal fade" role="dialog">

<div class="modal-dialog modal-lg" role="content">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login </h4>
<button type="button" class="close" data-
dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-sm-4">
<label class="sr-only"
for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control form-control-
sm mr-1" id="exampleInputEmail3" placeholder="Enter email">
</div>
<div class="form-group col-sm-4">
<label class="sr-only"
for="exampleInputPassword3">Password</label>
<input type="password" class="form-control form-control-
sm mr-1" id="exampleInputPassword3" placeholder="Password">

2
 </div>
<div class="col-sm-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox">
<label class="form-check-label"> Remember me
</label>
</div>
</div>
</div>
<div class="form-row">
<button type="button" class="btn btn-secondary btn-sm ml-
auto" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary btn-sm ml-
1">Sign in</button>
</div>
</form>
</div>
</div>
</div>
</div>

 Next we introduce another link on the right side of the navbar in order to trigger
the display of the modal. To do this, add the following code in the navbar after
the </ul>:

<span class="navbar-text">
<a data-toggle="modal" data-target="#loginModal">
<span class="fa fa-sign-in"></span> Login</a>
</span>

3
We are introducing another link to the right of the navbar using the navbar-text. This
contains a link with an <a> tag with the data-toggle="modal" and data-
target="#loginModal" attributes.

 Save all the changes and do a Git commit with the message "Tooltip and
Modal".

Conclusions
In this exercise we explored tooltips and modals as two ways of revealing content
for the user upon clicking on a button or a link.