Tooltips, Popovers and Modals

Loading...

The Hong Kong University of Science and Technology의 강좌에서

Front-End Web UI Frameworks and Tools: Bootstrap 4

1580개의 평가

The Hong Kong University of Science and Technology

Front-End Web UI Frameworks and Tools: Bootstrap 4

1580개의 평가

Specialization Full-Stack Web Development with React에서 4의 강좌 1

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.

수업에서

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

강사 만나기

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

[MUSIC]

Let us now try to understand several mechanisms to enable us to

display information to the users overlaying the content of your web page.

So here we'll look at three different constructs that are available in Bootstrap

called tooltips, popovers, and modals.

So what are tooltips, popovers and modals and how are they useful?

We'll look at some basic ideas first ,and then we'll go on to look at some examples.

In the exercise that follows, we'll use tooltips and

modals in our web page, and we'll look at an example of popovers.

So, as I mentioned, tooltips, popovers, and modals are a way of revealing content

to the users, when the user interacts with certain elements on your web page.

Say for example when the user's mouse

clicks on a button, or hovers over a button, or clicks on a link,

or reaches a certain point on your web page.

So all these will trigger information to be displayed to the users.

So in this case,

the information is displayed as an overlay on top of your web page.

So the underlying content of the web page is still there, but

this is laid out on top of the underlying content.

So in terms of flexibility, tooltips are the simplest to implement, but

at the same time have limited flexibility in how they can display information.

Popovers are more flexible than tooltips, but they also have their own limitations.

Modals give you the most extensive support for

displaying content in a wide variety of ways.

As an example, let's go to our webpage that we have been working on.

You see that when we hover our mouse pointer onto this button.

You see this message popping up on the screen here,

with some additional information.

This is an example of a tooltip.

This allows you to display smaller amounts of information to the users.

So for example if you are trying to guide users through your website and

want them to know what happens when you click various locations any web page,

these maybe a good way of reminding them of what is expected.

So you could easily design for example,

walkthroughs of your website using these tooltips to indicate to users.

If you want a bit more detailed information,

then popovers would be more useful.

The same example, implement and using a popover would look like this.

Now in this case,

you will have to explicitly click on the button to show the popover.

So in that case, the popover is shown with some title information, and

then the actual content at the bottom in that popover.

Now, dismissing the popover will require you again to click on the bottom there.

So this is the behavior of a popover.

In some circumstances, popovers are more useful than tooltips.

Our third kind of data overlay is the modal.

A modal allows you to present more

detailed information to the users than a tooltip and popover.

The content of the modal is itself divided into a header, body, and the footer.

And the modal itself can contain a lot more detailed information.

And you can use the entire Bootstrap grid,

inside the modal body, to organize the actual content.

We look at a couple of examples of the use of modals next.

Going to our web page, you will see that on the right hand side,

here we have a link here called Login.

So when you click on that link, you will notice that this modal

with their login form is popped up on the screen.

So this is the typical behavior of a modal.

And so here you can type in the information, and

then click on the Sign In button to sign in to your website.

Going to your Coursera page, here is a real life example of the use of a modal.

So for example, if you click on the Log In button here,

you can see that on Coursera, a form pops up on the screen.

So this is another use of a modal in your web page.

Now that you have seen examples of tooltips, popovers, and modals,

let's go to the next exercise, where we'll create a tooltip on our index.html page.

We'll also create a modal that allows the user to type in information for

logging in into our web page.

[MUSIC]

Coursera 카탈로그 살펴보기

무료로 참여해 맞춤화된 추천, 업데이트 및 제안을 받아보세요.

Coursera는 세계 최고의 교육에 대한 보편적인 접근 기회를 제공하며, 최고의 대학 및 기관들과 제휴하여 온라인 강좌를 제공합니다.

© 2019 Coursera Inc. All rights reserved.

앱스토어에서 다운로드하기

구글 플레이에서 받기