Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In this course, author James Fritz shows how to create HTML-based websites with Muse—a toolset familiar to anyone who has used Adobe Photoshop, InDesign, or Illustrator. The course covers the design process from start to finish, from setting up web pages and populating them with graphics and text, to creating dynamic menus and adding special features such as widgets, slideshows, animations, embedded video, social media integration, and more. James also explains how to create an alternate layout for display on mobile devices, publish and update your site, and view analytics on web traffic.
One of my favorite widgets is the tooltip. This widget lets you set a hotspot to reveal one area that was previously hidden. Let's take a look at how we can add one to our website. We'll go to the tooltip page and on this page, I'm going to open up the Widget Gallery, so let's move this out if the way. And I'm just going to drag out tooltips. I'm going to close this panel because I don't need it anymore and we'll just stick this over here. But before we start to edit this widget, I'm just going to put this in the center of our page and we're going to go into Preview mode to see how it works.
You notice to begin with that we don't see the big tooltip box with text in the picture. All we happen to see are three small gray circles. But when I mouse over one of these, that tooltip will pop up. If I mouse over the next one, you'll see it's at a different location, and the same is true with the third. Now that we understand how this tooltip functions, let's break it apart and make it work with our design. Back in the Design mode, I'm going to deselect and I'm going to bring in a text file that has the text that we need. So we're going to go to File > Place or Command+D or Ctrl+D on the PC and inside our Assets folder, I'm going to look for tooltips.
There were go, tooltips.txt. I'll click Open and we'll just put this over on the right hand side. Next, we need to remove the elements we don't need. So for this first tooltip, we're just going to slowly click down until we have the image selected. And we'll just hit the Delete key because we don't need it. Next, we'll get rid of the small text, because that isn't needed, and I'm just going to come over here and cut this text and paste it in here. So we have the "Roof painted white to reduce cooling costs." I'll just resize this to make this a little smaller, and we'll make that match nicely. There we go.
That looks pretty good. Now, because this tooltip is referring to the roof, I'm just going to slowly click down to select it, and then I'll just stick it right here. And I want the hotspot or the trigger to be on the roof, so we're just going to click and drag and make this a little bigger to cover the roof area. Now let's repeat the process for the rest. When I click on the second one, you can see that it switches to the next tooltip. Let's scroll down here. We're going to repeat the process. We're going to get rid of this picture which we don't need, we'll get rid of the bottom text, and then we'll select the text here, the Wall built, cut it, and we'll paste it in.
We'll resize this so it looks a little better, and we're going to put this text right over here, and we're going to have the tooltip be the size of the wall. For the third one, this is going to be for a canopy. We'll just stick this right here, get rid of the elements we don't need, and we'll cut and paste the text in. There we go.
This is looking much better. And for the canopy, we'll have this be the size of the canopy. Now for the last one--we need the fourth one--all I have to do is hit this little plus to add one more. This is going to be the size of this bench, so we'll put it over here for the bench. I'm going to cut this to the clipboard, move the tooltip down, and we'll paste it in. Now, you'll notice there's a problem. This text doesn't look the same as this one.
Well, what we want to do is make a paragraph style so it's consistent. So I'm just going to select this text. We'll open up our paragraph styles, so we'll go to Window > Paragraph Styles, and then we'll open the panel so we can find it. We'll make a new paragraph style for this, and we'll call it tool tip. There we go. That looks pretty good. Now I just have to come back and select the other tooltip that we made and select that text, and we'll apply tool tip so it's consistent.
We'll give this a little more room, and we'll resize this. Now, let's preview to make sure it's working. In Preview mode, we'll see that we have these large ugly rectangles, but we're going to make these disappear in a second. But as I mouse over the area, we can see that each of these pops up appropriately. But the problem is, right now I don't want to see these ugly rectangles; I want them to be invisible. So what we can do is back in Design mode, I'm going to select each of these and turn off the fill in each state.
So we're going to change the Fill to be None and we're going to need to go to the States panel. Make sure that each of these is None as well. We can also hit the trashcan to get rid of it a little faster. Then we can just repeat this for each of these. None, we'll hit the trashcan, and now it's gone, and then we'll repeat it on the last one. There we go. That looks pretty good. Now when we go into Preview mode, we can see here is the photo, but as we happen to mouse over certain areas, we get the little tooltips to pop up wherever the tooltip happens to be.
Using the tooltip is a great way to add additional information to a page that you want to keep clean and uncluttered. In addition to providing text, you can include images or other content inside the target that pops up. Take some time to experiment and see what you can come up with.
Find answers to the most frequently asked questions about Muse Essential Training.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.