Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Tooltips can greatly improve the usability of your web site by providing direction and cues to visitors. In this course, Chris Converse shows how to convert text or graphics into a mouse-sensitive tooltip. The tutorials demonstrate how to write the necessary HTML and activate the tooltip with jQuery, as well as add positioning and effects.
Now back in our HTML file, we need to have a place inside of our file where we can store HTML data for a tooltip. Now inside of our data-tip-source attribute which I'm highlighting right here, we can put text based information, but we can't put HTML content in here. So if we want to format our tip in any way, maybe change the color, use bold type, bring in images, we've to do this with HTML, and we can't put HTML inside of an attribute on an HTML element itself.
So what we're going to do is create a container to hold all of the HTML data that we want to be able to pull from for tips that have HTML content. So inside of our HTML page, let's come down to after the tooltip container, let's hit Return, so let's add a div, let's give this a class and let's call it tooltip-html-source. Let's end that div tag. Let's split that open and inside of this div container, we're going to put additional div containers for each tooltip, and this is where we're going to store the HTML data, so we can populate that into the tooltip container.
So inside of here, let's start with a div tag, just hit a space, we're going to set id equal to two quotes. Inside we're going to call this tooltip-sidebar, let's end that div, let's split that open. Now inside here we want to add the HTML for that tooltip that has the lynda.com logo in there. So I'll start with an image tag, we will set a source images/lynda.gif, space, style equals two quotes. We'll just put an inline style on this.
We'll set that to float:left, outside of the attribute forward slash and then end the image tag. Next we'll type; This is a tip that has. Next we'll add an HTML tag to make the next words bold, so add a strong tag. Next, we'll also make the words italic, so we'll type em for emphasis, let's add a space, let's add an attribute called style, equals two quotes. We're going to change the color of the bold and italic text, color, space, pound sign ffe19a, that's going to give us that light yellow color, then a semicolon.
So this is an inline style on the emphasis tag, let's end that tag. We'll type HTML-formatted, let's end the emphasis tag, then we'll end the strong tag, then a space, and the word content, comma, space, including an image and a period. So inside of this div with an id of tooltip-sidebar, we're bringing in an image, we're writing a sentence that says this tip has HTML formatted content including an image, and the word HTML formatted is going to be strong and italic.
Now we're floating this image up here, so we want to make sure that the tooltip container can expand to encompass all of its children that have float properties. So let's hit Return, let's type div. We will set a class and I have a CSS rule for clearing all the objects, so we'll type clear-all, and then end that div tag. Let's save our work. So now we have all of the HTML in place that we're going to put inside of the tooltip container. We also created the tooltip HTML source container.
Let's come up here and copy that class name, let's switch over to tooltip.css, and let's come in here and hide that. We don't actually want to see the container that's holding all of the HTML content. So let's type a period, let's hit paste, so .tooltip-html-source, beginning and ending bracket. We're going to set display to none. That way when this loads, all of the HTML content inside of the HTML source is going to be hidden.
Now that we have the HTML in place to hold the content for an HTML tip, in the next movie we can add attributes to our aside anchor link, and then do a detection in jQuery to test for HTML-base tips.
There are currently no FAQs about Create a Tooltip with jQuery.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.