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.
Inside of the attr two tick marks for a string literal, data-tip-type. So for each HTML element with a tooltip class that triggers this function, this refers to the actual item that was rolled over. So we're going to check the attribute of each one of those items. So after the parentheses hit a space, two equal signs, another string literal and then type in text. So if the item that we moused over has the data-tip-type set to text, we're going to do this instruction here.
So inside of these brackets we're going to target the tooltip_container and set the HTML. So start with a dollar sign, parentheses, inside of the parenthesis two more tick marks, pound sign, tooltip_container. Outside of the parenthesis .html, parenthesis, then a semicolon. Inside of the parenthesis for html dollars sign, parenthesis, type the word this inside.
Outside of the parenthesis .attr for attribute, another set of parenthesis, tick marks inside for a string literal, data-tip-source. So what this is doing is targeting the tooltip_container and setting the html inside to the value of the item that was rolled over whatever the data-tip-source value is set to. Now to test this, let's save our file, let's come back to the index.html file, let's choose File > Save All, again just to make sure that everything has been saved.
Let's go to the File Manu > Preview in Browser. Once this comes up in a browser hit reload. Now we see our tooltip down here with our Test text. I'll come up here and rollover the text- based tooltip and then notice that the HTML has been changed to say this is the tip text, matching exactly what we put inside of the data-tip-source attribute of the actual link that just triggered that. So now that we're properly finding and testing for text-based tooltips, next we'll work on adding some HTML for the HTML format of tooltips.
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.