Member Avatar for Sinderone

I am trying to do something like a popout and am not sure how to do that or just a text box that will do a transition from a word to the box on hover. I would like to do this in css/3 if I can. Will any one help me out with some ideas?

Edited by Sinderone because: add tag
  • 3 Contributors
  • 3 Replies
  • 185 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Sinderone

Dani AI

Generated

A compact, accessible CSS-only pattern you can adapt for a “word → popout” effect. — building on ’s tooltip idea (and ’s tip to study examples), this keeps the HTML minimal, uses CSS3 transforms/opacity for smooth animation, and adds a couple of accessibility and touch notes.

<span class="tooltip">
  <a href="#" class="trigger" aria-describedby="tip1">Word</a>
  <div id="tip1" class="popup" role="tooltip">Expanded text here</div>
</span>

.tooltip { position: relative; display: inline-block; }
.popup {
  position: absolute; left: 50%; top: 100%;
  transform: translate(-50%, 8px) scale(.98);
  transform-origin: top center;
  opacity: 0; pointer-events: none;
  background: #222; color: #fff; padding: 8px 10px; border-radius: 4px;
  white-space: nowrap; z-index: 10;
  transition: transform .18s cubic-bezier(.2,.8,.2,1), opacity .18s ease;
  will-change: transform, opacity;
}
.tooltip:hover .popup,
.tooltip:focus-within .popup,
.tooltip.open .popup { opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto; }

.popup::after {
  content: ""; position: absolute; top: -6px; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent; border-bottom-color: #222;
}

Notes and troubleshooting

  • Animate transform + opacity — avoid animating height/width (janky). Using will-change or translateZ(0) can make it smoother, but don’t overuse.
  • Use :focus-within so keyboard users see the popout. Add aria-describedby on the trigger and role="tooltip" on the popup for screen readers; for robust a11y toggle aria-hidden with JavaScript when showing/hiding.
  • Hover won’t work on touch: add a small script that toggles .open on tap and removes it on outside tap or focusout. If the popup contains interactive controls, treat it as a popover (manage focus and close on Esc).
  • If you see flicker when moving between trigger and popup, ensure the popup is inside the same .tooltip container and use pointer-events rules above.

This gives a lightweight, performant base to customise the animation, spacing, and placement for your design.

Recommended Answers

All 3 Replies

Member Avatar for almostbob

I am fundamentally lazy, so goto somewhere like and download one of their free scripts, and see how they did it, then do your own

Member Avatar for Sinderone

That is what I am looking for think you.

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.