tooltip-custom-interactive

Use this rule to prevent nested interactive controls inside Pluma Tooltip's default trigger wrapper.

By default, Pluma Tooltip renders its trigger as a native button. If the child is already interactive, such as a Button, Link, or native button, the result is an interactive element inside another interactive element. Use isCustom or @isCustom so the real interactive element becomes the tooltip trigger.

Incorrect

import { Button, Tooltip } from '@customerio/pluma-components/react';

<Tooltip content="Save changes">
	<Button>Save</Button>
</Tooltip>

Correct

import { Button, Tooltip } from '@customerio/pluma-components/react';

<Tooltip content="Save changes" isCustom={true}>
	<Button>Save</Button>
</Tooltip>

What is checked

The rule only checks Pluma Tooltip bindings imported from Pluma. It resolves aliases before matching component usage, so this is still reported:

import { Tooltip as HelpTip, Link as DocsLink } from '@customerio/pluma-components/react';

<HelpTip content="View docs">
	<DocsLink href="/docs">Docs</DocsLink>
</HelpTip>

A local component named Tooltip is ignored unless it is imported from a Pluma entrypoint.

Interactive trigger children

The rule reports direct Tooltip children that are known interactive elements:

• Pluma Button, Checkbox, Link, OptionCard, PlainButton, PlainLink, Radio, Select, and Toggle
• Ember PlumaButton, PlumaCheckbox, PlumaLink, PlumaOptionCard, PlumaPlainButton, PlumaPlainLink, PlumaRadio, PlumaSelect, and PlumaToggle
• Native a, button, input, select, and textarea

This first version intentionally focuses on the common trigger-child pattern. It does not inspect interactive content inside TooltipContent; use Popover when tooltip content itself needs actions.