Member Avatar for GR Web FX

Hey people

I currently have some rollover buttons.....very simple....text turns from grey to red when the mouse moves over the button.
I did this through dreamweavers rollover option.

But i what i want to achieve in addition to this is, when the mouse rolls over the button and turns the text red, i want a text box to appear with a brief description about the specific section. The same as when you leave your cursor over an icon for a couple of seconds, a little box appears telling you what it is.

Im not too hot with HTML and Java so does anyone know how i achieve using dreamweaver functions? If someone has a script or code for this technique i will give it a go, but would prefer to use a dreamweaver tool if possible.

Thanks for any help
GR Web FX

  • 4 Contributors
  • 3 Replies
  • 223 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by greghuston

Dani AI

Generated

A compact, accessible pattern you can drop into the page in Dreamweaver. It uses a data-tooltip attribute for the message, CSS for the visual box (with a short delay before it appears), and an optional tiny JavaScript snippet if you want explicit timing control. This keeps markup minimal and keyboard-friendly, and builds on the thread comments from , , , and by giving a ready-to-paste example.

HTML + CSS (paste CSS inside <style> in the page head; put the HTML where the button/link belongs):

<a class="nav-btn" href="/section" data-tooltip="Brief description of this section">Section</a>

<style>
.nav-btn {
  color:#666;
  position:relative;
  text-decoration:none;
}

.nav-btn:hover,
.nav-btn:focus { color:red; }

.nav-btn[data-tooltip]:after {
  content: attr(data-tooltip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 8px);
  transform:translateX(-50%) translateY(4px);
  background:#222;
  color:#fff;
  padding:6px 8px;
  border-radius:4px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease 0s, transform .15s ease 0s;
  z-index:1000;
}

/* show after a brief hover delay, hide immediately when leaving */
.nav-btn:hover[data-tooltip]:after {
  opacity:1;
  transform:translateX(-50%) translateY(0);
  transition-delay:.6s; /* appears after 600ms */
}

/* keyboard users: show immediately on focus */
.nav-btn:focus[data-tooltip]:after {
  opacity:1;
  transform:translateX(-50%) translateY(0);
  transition-delay:0s;
}
</style>

Optional JS for precise control (adds/removes a class after a timeout; paste before </body>):

<script>
document.querySelectorAll('.nav-btn[data-tooltip]').forEach(function(el){
  var timer;
  el.addEventListener('mouseenter', function(){ timer = setTimeout(function(){ el.classList.add('tooltip-visible'); }, 600); });
  el.addEventListener('mouseleave', function(){ clearTimeout(timer); el.classList.remove('tooltip-visible'); });
  el.addEventListener('focus', function(){ clearTimeout(timer); el.classList.add('tooltip-visible'); });
  el.addEventListener('blur', function(){ el.classList.remove('tooltip-visible'); });
});
/* Add CSS rule .nav-btn.tooltip-visible:after { opacity:1; transform:translateX(-50%) translateY(0); } */
</script>

Dreamweaver notes & troubleshooting: switch to Code view to paste CSS into the head and JS before </body>, or add them to your template. Add data-tooltip text via the Properties panel or Code view. If the box doesn't show, check parent elements for overflow:hidden, verify z-index, and ensure nothing overlays the link. For accessibility consider also using title or aria-describedby if you generate DOM tooltip elements.

Recommended Answers

All 3 Replies

Member Avatar for UberAAZ

Personally, I'd do what you've mentioned above in Flash. There's probably some DHTML code out there, but I like to keep my pages nice and simple, and besides, Dreamweaver doesn't really keep track of it very well.

For DHTML stuff, try DynamicDrive - there's sure to be something of help there.

Hope that helps,

Member Avatar for tgreer

There is no need to use Flash for something so basic. I can't answer your Dreamweaver questions, sorry. As a Web Developer, I code HTML, CSS and JavaScript "by hand". If you'll be working in this arena, those are skills you should definitely learn!

A very simple script using JavaScript's "onmouseover" and "onmouseout" events will do what you're asking. I'd suggest doing some web searches on those terms, and then post again if you have any more questions.

Also, on a personal note, since this is a professional forum, I would ask that everyone use proper spelling, punctuation, and grammar. It doesn't take that much more time and increases your chances of getting quality responses.

Member Avatar for greghuston

If you are looking for a 'box' to popup I'd suggest using overlib. I don't know if we can post links so just Google "overlib" - 1st results. Free download and relatively easy to install.

Hope it helps.

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.