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 create the markup in Dreamweaver and activate the tooltip with jQuery, as well as add positioning and effects.
So let's start by adding a div, we will set a class. The class is going to be tooltip-source-html. Let's end the tag and then end the div. Let's come in here and split that open and let's add another div inside of here. We are going to set an id to tooltip-sidebar.
Let's end that tag and then end the div. Let's split that open and inside of here let's add the HTML formatting that's going to be for the sidebar tooltip. We are going to start by adding an image tag. We are going to set the source equal to. Let's come into the images directory on the desktop. Let's pick the lynda.gif file. Let's hit a space. Let's add a little inline styling here. So let's type style equals, two quotes.
Inside of the quotes we'll set float:left, then a semicolon. Outside of that attribute, forward slash, let's end the image tag. Then let's type this is a tip that has, then a space. Let's add a strong tag. Next, let's add an emphasis tag.
Let's add a style attribute onto the emphasis tag, style equals, inside of the parentheses color, colon, pound sign. We'll just make this a light yellow. So let's put in ffe19a, semicolon. Let's end the emphasis tag, then we'll type HTML-formatted.
Let's end the emphasis tag, let's end the strong tag. Then the word content, comma, including an image, then a period. Now since we have an image up here with the float property we're going to want to actually clear that float. So let's hit a Return, we'll add one more div. We're going to set a class=" clear-all" and then end that div.
Now with our HTML in place we want to hide this so that the users don't actually see where we're storing this content, because this is going to be the content we want to inject into the tooltip. So let's come up here and let's select the class name, tooltip-source-html. Let's copy that, save our HTML file. Let's move over to our tooltip.css file. Let's scroll down and after our tooltip container, let's hit a Return, type period, paste in that class name, put a beginning and ending bracket, and inside there we're going to set display to none. Then hit Save.
So now with our HTML file in the page and our CSS hiding that container, next we can work on adding the additional attributes into the sidebar to pick out this id instead of using text inside of the data-tip-source.
There are currently no FAQs about Create a Tooltip with jQuery and Dreamweaver.
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.