Notifications

3 new

Marcus Silva assigned you to Q3 Revenue Report

10 minutes ago

Emma Wilson commented on Homepage Redesign

45 minutes ago

James Miller mentioned you in Sprint Planning

2 hours ago

Sarah Chen uploaded Q2 Analytics Deck

3 hours ago

David Kim requested review on API Integration PR

5 hours ago

View all notifications

Tooltips

Tooltip and popover examples.

Hover Tooltips

Tooltip on top

Tooltip on bottom

Tooltip on left

Tooltip on right

<div class="group relative">
  <button class="bg-alpine-500 hover:bg-alpine-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">Top</button>
  <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1.5 bg-alpine-900 text-white text-xs rounded-lg whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
    Tooltip on top
    <div class="absolute top-full left-1/2 -translate-x-1/2 -mt-1 border-4 border-transparent border-t-alpine-900"></div>
  </div>
</div>

Click Popovers

Popover Title

This is a click-triggered popover with detailed content and a close button.

Account Details

Your account has premium features enabled. You can manage these in Settings.

<div class="relative" x-data="{ open: false }" @click.outside="open = false">
  <button @click="open = !open" class="bg-alpine-500 hover:bg-alpine-600 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">Click Me</button>
  <div id="popover1" class="hidden absolute ... z-50 p-4">
    <h4>Popover Title</h4>
    <p>Popover content here.</p>
  </div>
</div>

<script>
document.addEventListener('click', function(ev) {
  if (!ev.target.closest('[id^="popover"]')) {
    document.querySelectorAll('[id^="popover"]').forEach(function(p) { p.classList.add('hidden'); });
  }
});
</script>

Tooltip Colors

Dark

Dark tooltip

Light

Light tooltip

Colored

Colored tooltip

<div class="group relative">
  <span class="text-sm font-medium text-gray-700 cursor-default">Dark</span>
  <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1.5 bg-alpine-900 text-white text-xs rounded-lg whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
    Dark tooltip
    <div class="absolute top-full left-1/2 -translate-x-1/2 -mt-1 border-4 border-transparent border-t-alpine-900"></div>
  </div>
</div>