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.
Now in order to have content for our tooltip we're going to need to add some content into the HTML so that we can actually pull this out of jQuery later. So what we're going to do is let's scroll up in our HTML file. Let's find the hyperlink that's not inside of the aside, but still inside of the article. It's the one down here that says text-based tooltip. We have an anchor link outside of here with an href. Inside of this anchor tag we want to add some additional attributes. Let's first start by typing class and the class we want to set for this going to be tooltip.
Next property, we're going to set in HTML5 data property. So we're going to data dash and then we're going to make up in attribute name here, tip dash type equals, two quotes, and then let's say "text" inside of that. Then one more attribute. Data dash, tip dash, source equals two quotes, and inside of here we're going to the actual text that's going to show up as the tooltip "This is the tip text." So now we have these three additional attributes inside of here.
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.