Member Avatar for gred

I am learning dreamweaver cs3 and want to have some text pop up when I hover over a link - and the link doesn't go anywhere, just have a pop-up explanation. It apprears the term hover was the key term, but now with dreamweaver it is called rollover.

But all I can find is how to change the color of the link text or change images on rollover. How do I pop up text on hover using dreamweaver?

A page I was looking at on Daniweb has a section at the bottom called "similar threads", and when I hover over any of the links a box of text pops up like I want to do. The html source shows me that the term "title" is used to label the text that pops up. But how do I do that in dreamweaver?

thanks for any help - gred

  • 3 Contributors
  • 3 Replies
  • 339 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by gred

Dani AI

Generated

As discovered, the small box that appears over DaniWeb links is produced by the HTML title attribute — it’s the quickest way to show hover text. That said, title has limits: many screen readers ignore it, browsers and assistive tech treat it inconsistently, and touch devices don’t provide hover. ’s note about alt applies only to images (and even there alt is for fallback/accessible text, not a reliable tooltip).

For a more robust, keyboard-accessible tooltip that works without JavaScript, use a CSS approach and show the text on both hover and focus. Example (add the class to the link and put the CSS in your stylesheet):

<a href="#" class="tooltip" data-tooltip="Short explanation">Link text</a>
.tooltip { position: relative; }
.tooltip:focus, .tooltip:hover { outline: none; }
.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 0;
  bottom: 120%;
  background: #222;
  color: #fff;
  padding: 6px 8px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 999;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .15s, transform .15s;
}
.tooltip:hover::after,
.tooltip:focus::after { opacity: 1; transform: translateY(0); }

In Dreamweaver CS3 this can be done either by editing the HTML in Code view or by selecting the link and adding a title (if available) in the Properties panel; for the CSS method above, add the class to the link from the Properties panel and include the CSS in the site stylesheet. ’s Spry tooltip was a common CS3-era solution, but modern CSS or small libraries (or ARIA techniques) are preferable today.

Troubleshooting notes: tooltips can be hidden by parent elements with overflow: hidden or by low z-index; they’re ineffective on touch-only screens unless converted to a tap action; and critical information should not rely solely on title — provide visible labels or use aria-describedby for screen readers.

Recommended Answers

All 3 Replies

Member Avatar for ry4n

I would look into using spry tool-tip. Examples and explanations can be found here,

and it only uses very little javascript coding.

Member Avatar for tiger86

Hi Again Gred, there are a few ways to tackle this problem also.

Solution 1.

Use the simple but effective alt command. You don't need any rollover or javascript this is simple HTML. Here is a string of code

<img src="banner.jpg" alt="cool picture" width="458" height="216" />

when your mouse goes over the image the words cool picture will appear in a little yellow box

Solution 2.
This requires a little complicated DreamWeaver Function that uses some Javascript. What you do is go to the little image icon that has a tree on it and click on the tiny arrow next to it. This will make a drop down menu of things you can do with images, one of them being image rollover.

The Image rollover is suppose to be used to change images but you can also have text appear when the image changes though I think the alt command is a lot simpler then getting into javascript.

I hope I helped! Oh gred you can mark your other thread as solved if you got all the info you needed for that thread.

Member Avatar for gred

I gave you some reputation on your earlier help - have to wait evidently till tomorrow for this one - thanks again for you time and assistance. I am amazed that people who know are willing to share with those of us who don't have a clue - gred

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.