Tooltip - Course Cascading Style Sheets (CSS/CSS3) - Part 21 | web Developer courses

Duration: 18:49 minutes

Summary: In this video, we will talk about how we can create a tooltip using CSS. As you know you can use some JavaScript to handle some tooltip features (like adding a delay before showing the tooltip). But in this case, we are simply using CSS to handle two tooltips: one basic, and one with an image. We will start by creating an anchor tag. We will have a span within the anchor. Both tags are associated with classes that we can manipulate within the CSS. To start, the spans are hidden (with the margin-left property). Then, as the user hovers over the anchor, the tooltips will show. Both tooltips support the border radius and the box shadow CSS3 properties. The second tooltip will also display an image.

Technologies and Resources: CSS, HTML, Notepad++, background, box-shadow, border-radius, span, class, border-bottom, color, cursor, outline, text-decoration, position, margin-left, font-family, left, top, z-index, margin-left, width, border-radius, box-shadow.