Skip to content

feat(tooltip): add iconVariant for the default trigger icon #3238

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Niznikr wants to merge 2 commits into
base: master
Choose a base branch
from
Open

feat(tooltip): add iconVariant for the default trigger icon #3238

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
94611b4
style(tooltip): format with prettier
Niznikr Oct 12, 2026
12960d3
feat(tooltip): add iconVariant for the default trigger icon
Niznikr Oct 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions components/__tests__/__snapshots__/story-snapshots.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10495,6 +10495,33 @@ exports[`Story HTML snapshots > Tooltip > ErrorTheme 1`] = `
</div>"
`;

exports[`Story HTML snapshots > Tooltip > IconVariants 1`] = `
"<div class="slds-p-around_medium slds-m-horizontal_x-large" style="margin:150px auto;width:500px">
<div class="slds-grid slds-gutters_small slds-grid_vertical-align-center">
<div class="slds-col slds-p-around_x-small">
<div class="slds-tooltip-trigger" style="display:inline-block;line-height:1"><button class="slds-button slds-button_icon" type="button" aria-disabled="true"><svg class="slds-button__icon" aria-hidden="true">
<use href="/assets/icons/utility-sprite/svg/symbols.svg#info"></use>
</svg><span class="slds-assistive-text">Help</span></button><span></span></div> bare
</div>
<div class="slds-col slds-p-around_x-small">
<div class="slds-tooltip-trigger" style="display:inline-block;line-height:1"><button class="slds-button slds-button_icon" type="button" aria-disabled="true"><svg class="slds-button__icon slds-icon-text-warning" aria-hidden="true">
<use href="/assets/icons/utility-sprite/svg/symbols.svg#info"></use>
</svg><span class="slds-assistive-text">Help</span></button><span></span></div> warning
</div>
<div class="slds-col slds-p-around_x-small">
<div class="slds-tooltip-trigger" style="display:inline-block;line-height:1"><button class="slds-button slds-button_icon" type="button" aria-disabled="true"><svg class="slds-button__icon slds-icon-text-error" aria-hidden="true">
<use href="/assets/icons/utility-sprite/svg/symbols.svg#info"></use>
</svg><span class="slds-assistive-text">Help</span></button><span></span></div> error
</div>
<div class="slds-col slds-theme_inverse slds-p-around_x-small">
<div class="slds-tooltip-trigger" style="display:inline-block;line-height:1"><button class="slds-button slds-button_icon slds-button_icon-inverse slds-button_icon-bare" type="button" aria-disabled="true"><svg class="slds-button__icon" aria-hidden="true">
<use href="/assets/icons/utility-sprite/svg/symbols.svg#info"></use>
</svg><span class="slds-assistive-text">Help</span></button><span></span></div> inverse
</div>
</div>
</div>"
`;

exports[`Story HTML snapshots > Tooltip > InButtonGroup 1`] = `
"<div class="slds-p-around_medium slds-m-horizontal_x-large" style="margin:150px auto;width:500px">
<div class="slds-button-group" id="_R_0_" role="group">
Expand Down
82 changes: 68 additions & 14 deletions components/tooltip/__docs__/Tooltip.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,11 @@ export default {
options: ['info', 'error'],
description: 'Theme of tooltip: info (blue) or error (red)',
},
iconVariant: {
control: 'select',
options: ['bare', 'error', 'inverse', 'warning'],
description: 'Styles the default info icon trigger (no children)',
},
variant: {
control: 'select',
options: ['base', 'learnMore', 'list-item'],
Expand Down Expand Up @@ -172,7 +177,8 @@ export const LearnMore = {
parameters: {
docs: {
description: {
story: 'The Learn More variant displays an info icon as the trigger. When no children are provided and `onClickTrigger` is set, it renders as a clickable link.',
story:
'The Learn More variant displays an info icon as the trigger. When no children are provided and `onClickTrigger` is set, it renders as a clickable link.',
},
},
},
Expand All @@ -197,7 +203,14 @@ export const AllAlignments = {
];

return (
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '60px', padding: '80px' }}>
<div
style={{
display: 'grid',
gridTemplateColumns: 'repeat(3, 1fr)',
gap: '60px',
padding: '80px',
}}
>
{alignments.map((alignment) => (
<div key={alignment} style={{ textAlign: 'center' }}>
<Tooltip
Expand All @@ -216,7 +229,8 @@ export const AllAlignments = {
parameters: {
docs: {
description: {
story: 'Tooltips can be aligned in 12 different positions relative to the trigger element.',
story:
'Tooltips can be aligned in 12 different positions relative to the trigger element.',
},
},
},
Expand Down Expand Up @@ -251,7 +265,10 @@ export const WithSpanTrigger = {
},
render: (args) => (
<Tooltip {...args}>
<span tabIndex="0" style={{ textDecoration: 'underline', cursor: 'help' }}>
<span
tabIndex="0"
style={{ textDecoration: 'underline', cursor: 'help' }}
>
Hover over this text
</span>
</Tooltip>
Expand All @@ -274,7 +291,8 @@ export const WithDelay = {
parameters: {
docs: {
description: {
story: 'You can configure open and close delays. This example has a 500ms open delay and 300ms close delay.',
story:
'You can configure open and close delays. This example has a 500ms open delay and 300ms close delay.',
},
},
},
Expand All @@ -297,7 +315,8 @@ export const AnchoredNubbin = {
parameters: {
docs: {
description: {
story: 'The anchored nubbin variant attaches the arrow directly to the trigger element. Use `hasStaticAlignment: true` with this feature.',
story:
'The anchored nubbin variant attaches the arrow directly to the trigger element. Use `hasStaticAlignment: true` with this feature.',
},
},
},
Expand Down Expand Up @@ -339,7 +358,8 @@ export const InButtonGroup = {
parameters: {
docs: {
description: {
story: 'Tooltips work well with icon buttons in a button group to provide context about each action.',
story:
'Tooltips work well with icon buttons in a button group to provide context about each action.',
},
},
},
Expand All @@ -358,11 +378,7 @@ export const Controlled = {
onClick={() => setIsOpen(!isOpen)}
/>
</div>
<Tooltip
content={tooltipContent}
isOpen={isOpen}
align="bottom"
>
<Tooltip content={tooltipContent} isOpen={isOpen} align="bottom">
<Button label="Controlled Tooltip" />
</Tooltip>
</div>
Expand All @@ -371,7 +387,8 @@ export const Controlled = {
parameters: {
docs: {
description: {
story: 'Use the `isOpen` prop to control tooltip visibility programmatically. When set, hover/focus behavior is disabled.',
story:
'Use the `isOpen` prop to control tooltip visibility programmatically. When set, hover/focus behavior is disabled.',
},
},
},
Expand All @@ -387,7 +404,44 @@ export const DefaultTrigger = {
parameters: {
docs: {
description: {
story: 'When no children are provided, Tooltip renders a default info icon button as the trigger.',
story:
'When no children are provided, Tooltip renders a default info icon button as the trigger.',
},
},
},
};

// Icon variants on the default trigger (matches lightning-helptext icon-variant)
export const IconVariants = {
render: () => (
<div className="slds-grid slds-gutters_small slds-grid_vertical-align-center">
{['bare', 'warning', 'error'].map((iconVariant) => (
<div key={iconVariant} className="slds-col slds-p-around_x-small">
<Tooltip
align="bottom"
content={`iconVariant="${iconVariant}"`}
iconVariant={iconVariant}
id={`tooltip-icon-variant-${iconVariant}`}
/>{' '}
{iconVariant}
</div>
))}
<div className="slds-col slds-theme_inverse slds-p-around_x-small">
<Tooltip
align="bottom"
content='iconVariant="inverse"'
iconVariant="inverse"
id="tooltip-icon-variant-inverse"
/>{' '}
inverse
</div>
</div>
),
parameters: {
docs: {
description: {
story:
'The `iconVariant` prop styles the default info icon trigger, like `icon-variant` on `lightning-helptext`. Use `inverse` on dark backgrounds, and `warning` or `error` to draw attention to the help text.',
},
},
},
Expand Down
Loading
Loading