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.
