# No Tooltips on Disabled Buttons

**NEVER** · **ID:** `interactions-disabled-no-tooltips` · **Category:** interactions
**Source:** [Rauno](https://interfaces.rauno.me/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/interactions-disabled-no-tooltips

> NEVER: Put a tooltip on a `disabled` button — it cannot receive focus or hover reliably, so keyboard users never see it. Use `aria-disabled` plus visible explanation text instead.

Disabled buttons should not have tooltips — they are not accessible to keyboard users

Disabled buttons cannot receive focus in the DOM, so keyboard users will never see the tooltip. Instead of hiding the reason behind an inaccessible tooltip, use aria-disabled with a visible explanation text so everyone can understand why the action is unavailable.

## Bad — do not do this

`interactions-disabled-no-tooltips-bad`

```tsx
import { useState } from 'react';

export function DisabledNoTooltipsBad() {
  const [showTooltip, setShowTooltip] = useState(false);

  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4 space-y-4">
        <div className="relative inline-block">
          <button
            disabled
            onMouseEnter={() => setShowTooltip(true)}
            onMouseLeave={() => setShowTooltip(false)}
            className="px-4 py-2 bg-muted text-muted-foreground rounded-lg text-sm cursor-not-allowed"
          >
            Delete Project
          </button>
          {showTooltip && (
            <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-foreground text-background text-xs rounded whitespace-nowrap">
              You need admin access
            </div>
          )}
        </div>
        <p className="text-sm text-muted-foreground">Tab to the button — tooltip is invisible to keyboard users.</p>
      </div>
      <p className="text-xs text-error">Disabled buttons can't receive focus — tooltip inaccessible</p>
    </div>
  );
}
```

## Good — do this

`interactions-disabled-no-tooltips-good`

```tsx
export function DisabledNoTooltipsGood() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4 space-y-4">
        <div>
          <button
            aria-disabled="true"
            className="px-4 py-2 bg-muted text-muted-foreground rounded-lg text-sm cursor-not-allowed focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
            onClick={(e) => e.preventDefault()}
          >
            Delete Project
          </button>
          <p className="text-xs text-muted-foreground mt-2">
            You need admin access to delete this project.
          </p>
        </div>
        <p className="text-sm text-muted-foreground">The reason is always visible — no tooltip needed.</p>
      </div>
      <p className="text-xs text-success">aria-disabled + visible explanation — accessible to everyone</p>
    </div>
  );
}
```

## References

- [interfaces.rauno.me](https://interfaces.rauno.me/)