Back

Creating a Compact Icon Button with Tooltip

Learn how to build a space-efficient icon button with helpful tooltip, smooth hover effects, and accessibility features.

HTML

The HTML structure for our icon buttons includes a container with multiple button elements, each containing an SVG icon and a tooltip span. 
        <div class="button-container">
          <button class="icon-button" aria-label="Settings">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="3"></circle>
              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
            </svg>
            <span class="tooltip">Settings</span>
          </button>
          
          <button class="icon-button primary" aria-label="Edit">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
              <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
            </svg>
            <span class="tooltip">Edit</span>
          </button>
          
          <button class="icon-button danger" aria-label="Delete">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="3 6 5 6 21 6"></polyline>
              <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
              <line x1="10" y1="11" x2="10" y2="17"></line>
              <line x1="14" y1="11" x2="14" y2="17"></line>
            </svg>
            <span class="tooltip">Delete</span>
          </button>
        </div>
Important accessibility features include: - Each button has an aria-label describing its function - The tooltip provides additional context for users who need it - We're using semantic SVG icons from a popular icon library (Feather icons)

CSS

First, we set up the container to arrange our icon buttons with equal spacing: 
        .button-container {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 16px;
        }
Next, we define the basic icon button with CSS variables for easy customization: 
        .icon-button {
          --button-size: 40px;
          --button-bg: #f3f4f6;
          --button-hover-bg: #e5e7eb;
          --button-active-bg: #d1d5db;
          --button-color: #374151;
          --button-hover-color: #111827;
          --button-border-radius: 8px;
          --tooltip-bg: #1f2937;
          --tooltip-color: white;
          
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          width: var(--button-size);
          height: var(--button-size);
          color: var(--button-color);
          background-color: var(--button-bg);
          border: none;
          border-radius: var(--button-border-radius);
          cursor: pointer;
          transition: all 0.2s ease;
          overflow: visible;
        }

        .icon-button svg {
          transition: transform 0.2s ease;
        }
The key properties here: - We set a fixed width and height to create a square button - We use flexbox to center the icon inside the button - We set overflow: visible to allow the tooltip to extend outside the button - We add a transition to the SVG for a subtle hover effect Next, we add hover and active states for interactive feedback: 
        .icon-button:hover {
          background-color: var(--button-hover-bg);
          color: var(--button-hover-color);
        }

        .icon-button:hover svg {
          transform: scale(1.1);
        }

        .icon-button:active {
          background-color: var(--button-active-bg);
          transform: translateY(1px);
        }
When hovered, the icon slightly scales up for a subtle animation effect, and the button changes background color. When clicked, it moves down slightly to provide tactile feedback. Now we create the tooltip styling: 
        /* Tooltip */
        .tooltip {
          position: absolute;
          bottom: calc(var(--button-size) * -0.25);
          left: 50%;
          transform: translateX(-50%) translateY(10px);
          padding: 6px 10px;
          background-color: var(--tooltip-bg);
          color: var(--tooltip-color);
          font-family: system-ui, -apple-system, sans-serif;
          font-size: 12px;
          font-weight: 500;
          border-radius: 4px;
          white-space: nowrap;
          pointer-events: none;
          opacity: 0;
          transition: opacity 0.2s ease, transform 0.2s ease;
          z-index: 10;
        }

        .tooltip::before {
          content: '';
          position: absolute;
          top: -4px;
          left: 50%;
          transform: translateX(-50%) rotate(45deg);
          width: 8px;
          height: 8px;
          background-color: var(--tooltip-bg);
        }

        .icon-button:hover .tooltip {
          opacity: 1;
          transform: translateX(-50%) translateY(0);
        }
The tooltip features: - A small triangle pointer created using a pseudo-element - A fade-in and slide-up animation when the button is hovered - pointer-events: none to ensure it doesn't interfere with clicking the button - white-space: nowrap to prevent the tooltip text from wrapping For accessibility, we add a focus state: 
        /* Focus state for accessibility */
        .icon-button:focus-visible {
          outline: 2px solid #3b82f6;
          outline-offset: 2px;
        }
Finally, we add color and size variants for different use cases: 
        /* Color variants */
        .icon-button.primary {
          --button-bg: #eff6ff;
          --button-hover-bg: #dbeafe;
          --button-active-bg: #bfdbfe;
          --button-color: #2563eb;
          --button-hover-color: #1d4ed8;
        }

        .icon-button.success {
          --button-bg: #ecfdf5;
          --button-hover-bg: #d1fae5;
          --button-active-bg: #a7f3d0;
          --button-color: #10b981;
          --button-hover-color: #059669;
        }

        .icon-button.danger {
          --button-bg: #fef2f2;
          --button-hover-bg: #fee2e2;
          --button-active-bg: #fecaca;
          --button-color: #ef4444;
          --button-hover-color: #dc2626;
        }

        /* Size variants */
        .icon-button.small {
          --button-size: 32px;
          border-radius: 6px;
        }

        .icon-button.small svg {
          width: 16px;
          height: 16px;
        }

        .icon-button.large {
          --button-size: 48px;
          border-radius: 10px;
        }

        .icon-button.large svg {
          width: 24px;
          height: 24px;
        }

        /* Filled variant */
        .icon-button.filled {
          background-color: var(--button-color);
          color: white;
        }

        .icon-button.filled:hover {
          background-color: var(--button-hover-color);
          color: white;
        }

        .icon-button.filled:active {
          background-color: var(--button-hover-color);
        }
These variations include: - Color options for different contexts (primary, success, danger) - Size variations for different UI needs (small, default, large) - A filled variant for higher emphasis actions This icon button design offers several advantages: - Space efficiency: Compact design takes minimal screen real estate while remaining easily clickable. - Clear purpose: The combination of recognizable icons and tooltips ensures users understand the button's function. - Accessible design: Includes proper focus states, aria-labels, and readable tooltips. - Visual harmony: The subtle background and hover effects create a clean, modern appearance. - Flexible styling: Various color and size options allow adaptation to different contexts. This button style is perfect for toolbar actions, compact card interfaces, data table row actions, or any UI where space is limited but functionality needs to remain clear and accessible.

Whole code

<div class="button-container">
  <button class="icon-button" aria-label="Settings">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="12" cy="12" r="3"></circle>
      <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
    </svg>
    <span class="tooltip">Settings</span>
  </button>
  
  <button class="icon-button primary" aria-label="Edit">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
      <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
    </svg>
    <span class="tooltip">Edit</span>
  </button>
  
  <button class="icon-button danger" aria-label="Delete">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <polyline points="3 6 5 6 21 6"></polyline>
      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
      <line x1="10" y1="11" x2="10" y2="17"></line>
      <line x1="14" y1="11" x2="14" y2="17"></line>
    </svg>
    <span class="tooltip">Delete</span>
  </button>
</div>

<style>
.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.icon-button {
  --button-size: 40px;
  --button-bg: #f3f4f6;
  --button-hover-bg: #e5e7eb;
  --button-active-bg: #d1d5db;
  --button-color: #374151;
  --button-hover-color: #111827;
  --button-border-radius: 8px;
  --tooltip-bg: #1f2937;
  --tooltip-color: white;
  
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--button-size);
  height: var(--button-size);
  color: var(--button-color);
  background-color: var(--button-bg);
  border: none;
  border-radius: var(--button-border-radius);
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: visible;
}

.icon-button svg {
  transition: transform 0.2s ease;
}

.icon-button:hover {
  background-color: var(--button-hover-bg);
  color: var(--button-hover-color);
}

.icon-button:hover svg {
  transform: scale(1.1);
}

.icon-button:active {
  background-color: var(--button-active-bg);
  transform: translateY(1px);
}

/* Tooltip */
.tooltip {
  position: absolute;
  bottom: calc(var(--button-size) * -0.25);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  padding: 6px 10px;
  background-color: var(--tooltip-bg);
  color: var(--tooltip-color);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10;
}

.tooltip::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background-color: var(--tooltip-bg);
}

.icon-button:hover .tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Focus state for accessibility */
.icon-button:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Color variants */
.icon-button.primary {
  --button-bg: #eff6ff;
  --button-hover-bg: #dbeafe;
  --button-active-bg: #bfdbfe;
  --button-color: #2563eb;
  --button-hover-color: #1d4ed8;
}

.icon-button.success {
  --button-bg: #ecfdf5;
  --button-hover-bg: #d1fae5;
  --button-active-bg: #a7f3d0;
  --button-color: #10b981;
  --button-hover-color: #059669;
}

.icon-button.danger {
  --button-bg: #fef2f2;
  --button-hover-bg: #fee2e2;
  --button-active-bg: #fecaca;
  --button-color: #ef4444;
  --button-hover-color: #dc2626;
}

/* Size variants */
.icon-button.small {
  --button-size: 32px;
  border-radius: 6px;
}

.icon-button.small svg {
  width: 16px;
  height: 16px;
}

.icon-button.large {
  --button-size: 48px;
  border-radius: 10px;
}

.icon-button.large svg {
  width: 24px;
  height: 24px;
}

/* Filled variant */
.icon-button.filled {
  background-color: var(--button-color);
  color: white;
}

.icon-button.filled:hover {
  background-color: var(--button-hover-color);
  color: white;
}

.icon-button.filled:active {
  background-color: var(--button-hover-color);
}
</style>
Thank you for reading this article.

Comments

No comments yet. Be the first to comment!

More buttons

Read more

Read more

Read more

Read more

Read more

Read more

Read more

Read more

Read more

Read more

Read more

Read more

Similar

Read more

Read more

Read more

Read more

See also

Read more

Read more

Read more