Directional Popover Tooltip

A directional popover tooltip built with pure HTML and CSS that reveals contextual content from a specific direction relative to its trigger element, making the relationship between the tooltip and its source visually clear.

Usage

This component is ideal for interfaces where tooltip orientation matters, such as navigation menus, icon groups, control panels, or dense UI areas where content should appear from a predictable side (top, bottom, left, or right).

Implementation

The directional behavior is implemented using CSS positioning, directional classes, and transform based offsets, allowing the tooltip to emerge from the chosen side while remaining lightweight and reusable.

HTML

<div class="popover-wrap">
  <span class="anchor">ⓘ</span>
  <div class="popover">
    Feature explanation with directional clarity.
  </div>
</div>

<div class="popover-wrap">
  <span class="anchor">ⓘ</span>
  <div class="popover">
    Feature explanation with directional clarity.
  </div>
</div>

CSS

.popover-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #cbd5f5;
}

.anchor {
  cursor: pointer;
  font-size: 14px;
}

.popover {
  position: absolute;
  top: 140%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: #1D546C;
  color: #f1f5f9;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 12px;
  width: 200px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
}

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

.popover-wrap:hover .popover {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.popover-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #cbd5f5;
}

.anchor {
  cursor: pointer;
  font-size: 14px;
}

.popover {
  position: absolute;
  top: 140%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: #1D546C;
  color: #f1f5f9;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 12px;
  width: 200px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
}

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

.popover-wrap:hover .popover {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Supports explicit direction-based placement
• Strengthens visual link to the trigger element
• Useful for structured and grouped UI layouts
• Designed for predictable tooltip positioning

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.