Exercise (Video): Tooltips and Modals

Loading...

Del curso dictado por The Hong Kong University of Science and Technology

Front-End Web UI Frameworks and Tools: Bootstrap 4

974 calificaciones

The Hong Kong University of Science and Technology

Front-End Web UI Frameworks and Tools: Bootstrap 4

974 calificaciones

Curso 1 de 4 en SpecializationFull-Stack Web Development with React

This course will give you an overview of client-side web UI frameworks, in particular Bootstrap 4. You will learn about grids and responsive design, Bootstrap CSS and JavaScript components. You will learn about CSS preprocessors, Less and Sass. You will also learn the basics of Node.js and NPM and task runners like Grunt and Gulp. At the end of this course, you will be able to a)Set up, design and style a web page using Bootstrap 4 and its components, b) Create a responsive web page design, and c) Make use of web tools to setup and manage web sites. This course also includes an honors track that enables you to work on your own project developing a website using Bootstrap 4. Students enrolling in this course should have prior good working knowledge of HTML, CSS and JavaScript.

De la lección

Bootstrap Javascript Components

This module concentrates on Bootstrap's JavaScript based components. You will learn about tabs, pills and tabbed navigation, collapse, accordion, scrollspy, affix, tooltips, popovers, modals and the carousel. At the end of this module you need to complete the third assignment.

Tooltips, Popovers and Modals5:10

Exercise (Video): Tooltips and Modals15:16

Conoce a los instructores

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

In the lecture before, we saw several ways of revealing content to the users.

So, this would be an overlay on top of

your web page to show the information to the users.

So, we'll look at two of those approaches,

Tooltips and Modals in this exercise.

First, we will add a Tooltip to this page.

So, going to index.html and in the Jumbotron,

we see this button in the Jumbotron there.

To this button, I'm going to add in a tooltip.

So going into this button,

what I will do now is simply go into the next line

so that it's a bit more clear to write the code there and into this button,

I'm going to introduce the tooltip here.

So, after the button warning, I would say,

data-toggle-tooltip, so you can see that

the javascript component coming into use here and then data-html-true.

So, if we apply this data HTML attribute and sent it to true,

that means that the tooltip content can be styled using

HTML and then they will say the next line,

I will give the attribute of title.

So, this is where the contents of the tooltip will be enclosed.

So we will say "or call us at".

So, you can see that I am using HTML to

format the contents of the tooltip there.

So with that, the tooltip is introduced into the button there and also the last attribute

I will give is data-placement which I will give as bottom here.

So, meaning that this tooltip will be shown to the bottom of this button here.

After adding in this into the button,

we'll now go and add

some JavaScript code to the bottom of this page in order to activate this tooltip.

Going to the bottom of the page,

let me introduce the script there by adding in the tags for the script.

Inside of this, we will define the actual JavaScript code here.

So we will say dollar documents.

So, this script is in using jQuery syntax here.

So, this specifies when the document is ready,

when this particular HTML document is ready

for rendering and define invoke this particular function here.

So, we supply the JavaScript function to be

invoked at that point so we'll specify our function and then we'll say

in brackets data-toggle-tooltip and tooltip.

So, that is the code that we are going to introduce into this page here.

This is in jQuery syntax and we will cover jQuery a little bit more in the next module.

For the moment, this is specifying that wherever there is an attribute of

this kind for that particular HTML tag,

turn on the tooltip.

So, but this change will save the changes and

then go and have a look at how the tooltip looks like on the web page.

Going to the web page,

now when we hold our mouse pointer onto the pattern here,

you can see that the tooltip is being displayed at the bottom here.

So, you can notice that the content of this tooltip is

exactly what we gave as the title attribute for that bottom there.

So, this is how we can add tooltips to our page.

Tooltips are a nice way of providing some additional information for

the user when the user navigates to different locations on the page.

Continuing with the exercise, in the next step,

we are going to create a modal in our web page.

This modal will host the login form and will be shown by using a link in their navbar.

So, to get started,

bootstrap advises that all modal related code be placed at the top of your page.

So, I'm going to go in and write below the navbar here,

I'm going to place in the code for the modal there.

So to create a modal,

I will start off by saying div ID login modal.

So, we give an ID to this modal so that it can be triggered from

the navbar link and then class as "modal fade".

So you see that the class is modal and fade means

that when the modal is brought onto the screen,

it'll fade onto the screen and the role is as a dialog.

So, which means that it is displayed on top of the page.

Let's close off the div of the part.

So inside here, we are going to create the modal.

So, in there, I'm going to create the second div with the class as modal-dialog and then

inside here we will define the content of

the actual modal here and close off the div.

And so, this is to be the modal content will be structured here.

So, inside this modal dialog we will create another div with

the class modal content and close

off the div and a typical modal will contain a modal-header.

So, that's where the next div is going to host.

And then a modal body

which will contain much of the modal related content.

All these sections of the modal are optional,

but at least you should have one such section in your modal

otherwise it does not make any sense to create the modal there.

So, with this, the structure of the modal is now ready.

So, we are going to go in and fill in the content into this modal.

So now, we need to define what goes into the modal.

Now, in the header we are going to put in a button,

a cross-button in the modal which when clicked will dismiss the modal.

That's the usual way modals are designed.

And the modal body will itself contain the form.

Now, a modal can contain anything that you want, so for example,

if you click on an image in

an image gallery and you want to show the larger size of the image,

even there you can use a modal to display the information.

Now in this exercise,

we are going to use the modal to host a form that is shown for the user.

Okay, now, in the modal header,

we are going to introduce a button with

the type button and class close.

So, you see that this is a button that is used to close the modal and then you will say,

data-dismiss and then modal.

So, what this means is that this particular button

when clicked will dismiss the modal from the screen.

And this button, I'm going to use the times,

will display as a cross in the modals here.

So I would say times here.

Before this button, we are going to introduce

a header which we will display in the modal's header so I

will start out with an h4 with the class modal title.

And then inside this h4,

I will include the title of the modal,

which is login because this is going to show the login form.

Now that we have put in some details into this modal,

let's add in the link into our navbar which will

trigger this modal and then we will have

a quick look at how the modal looks like on the screen.

Going to the navbar,

right after the UL here,

I'm going to include in

a link which can be used to trigger the showing and hiding of the modal.

So to do that, I will go in and use a span with the class navbar-text.

This is what allows me to include a link into the navbar and show it as text.

So, inside the span,

I will use an A with the data-toggle,

so you can see the JavaScript data-toggle coming in and

the data-toggle is for a modal and then data-target.

You recall that we had given the ID as login modal to our-

Modal that we included.

So, I'm going to use that as my data target with the hash in front of that.

And inside here, I will go in and use

a font awesome icon for a login.

So, this is a font awesome ''fa- sign-in''

icon and say login and close the e-tech.

So with that, let's save the changes and take a look at the web page.

Going to our web page in the browser,

you now see that on the right edge,

you see this login with this icon created there.

So this is the link that is going to trigger the showing of the modal.

So if I click on this link,

then the modal will show on the screen.

So notice that when we created this modal we said,

header which contained the login and then also this button and then the body,

currently empty, we're going to introduce more code in there.

Now if you click on this button the modal will disappear.

Click on that again, the modal is shown.

Even if you click outside the modal, the modal will disappear.

So this is the behavior of the modal that we have come to expect.

Now, in the next step I'm going to go in and introduce the form here.

I'm not going to explain the details of the form because you have

already studied forms in one of the earlier lessons.

So I'm just going to simply go in and paste the form code and

then we'll have a look at the form in the modal here.

Coming back to the code,

you can now see that in the modal body,

I have filled in a form.

And then I have two form groups here with an input with the type email

and input type password and then I have a checkbox here that I have.

So, this should be easy for you to decipher what this form is code structure EEs,

from your understanding of how Bootstrap forms are designed.

I have put in two buttons.

One is a submit button and another one is a cancel button.

The cancel button has the first one.

The cancel button here has data dismiss model.

So which means that when you click on the cancel button the model will be dismissed.

And the other one is a submit button which is used to submit the form.

So with this changes,

let's save the changes and then go and have a look at our Web page.

Going back to the web page,

now you click on the login then you'll see a form for a user to sign in.

So you'll see that you have two boxes here.

Input boxes here for entering email and password,

and then a checkbox for say Remember me.

And then you have a sign in and a cancel.

So if you click on the cancel the modal will go away.

Just like when you click on the cross there.

And then if you fill in this information and keep click on sign in,

the sign in process should be initiated.

At this moment we don't have a server for this to work,

but I'm just showing you in Bootstrap how you would create a form like this.

I'm sure you have seen things like these on

many websites where when you click on a login button

something like this with the form pops up on the screen

and expects you to type in the information.

So now you'll see how you can leverage models to display

information overlaying your web page.

With this we complete this exercise.

In this exercise, we have seen the use of tooltips

and we have seen the use of models to display content.

This is a good time for you to do a git-commint with the message tool tips and models.

Explora nuestro catálogo

Inscríbete de manera gratuita y obtén recomendaciones personalizadas, actualizaciones y ofertas.

Coursera brinda acceso universal a la mejor educación del mundo, al asociarse con las mejores universidades y organizaciones, para ofrecer cursos en línea.

© 2018 Coursera Inc. Todos los derechos reservados.

Descargar en la App Store

Consíguelo en Google Play