Skip to content

[tooltip] fixed popper content announcing #2541

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

Merged
merged 3 commits into from
Oct 27, 2025
Merged

[tooltip] fixed popper content announcing #2541

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f4e8ad5
[tooltip] fixed popper content announcing
ilyabrower Oct 21, 2025
f93000c
[tooltip] add test story
Valeria-Zimnitskaya Oct 23, 2025
1238c74
Update semcore/tooltip/CHANGELOG.md
ilyabrower Oct 24, 2025
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
6 changes: 6 additions & 0 deletions semcore/tooltip/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@

CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).

## [16.0.11] - 2025-10-30

### Fixed

- The tooltip popper content is not announced by screen readers in Chrome.

Check warning on line 9 in semcore/tooltip/CHANGELOG.md

View workflow job for this annotation

GitHub Actions / docs-lint 

[vale] reported by reviewdog 🐶
[DevDocs.Contractions] It's okay to use the contracted form 'isn't' instead of 'is not'.

Raw Output:
{"message": "[DevDocs.Contractions] It's okay to use the contracted form 'isn't' instead of 'is not'.", "location": {"path": "semcore/tooltip/CHANGELOG.md", "range": {"start": {"line": 9, "column": 30}}}, "severity": "INFO"}

## [16.0.10] - 2025-10-06

### Changed
Expand Down
4 changes: 2 additions & 2 deletions semcore/tooltip/src/Tooltip.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,11 +162,11 @@ function TooltipPopper(props) {
if (visible) {
timer = setTimeout(() => {
setIsVisible(true);
}, timeoutConfig[0] + 50);
}, timeoutConfig[0] + 150);
} else {
timer = setTimeout(() => {
setIsVisible(false);
}, timeoutConfig[1] + 50);
}, timeoutConfig[1] + 150);
}

return () => {
Expand Down
5 changes: 5 additions & 0 deletions stories/components/tooltip/tests/Tooltip.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
import TooltipInteractionsExample from './examples/basic_usage';
import InteractiveInTooltipsExample from './examples/interactive-in-tooltip';
import TooltipStatesExample from './examples/tooltip-styles';
import ValidationErrorsExample from './examples/validation-error';

const meta: Meta<typeof Tooltip> = {
title: 'Components/Tooltip/Tests',
Expand All @@ -24,3 +25,7 @@ export const TooltipStates: Story = {
export const TooltipInteractions: Story = {
render: TooltipInteractionsExample,
};

export const ValidationErrors: Story = {
render: ValidationErrorsExample,
};
34 changes: 34 additions & 0 deletions stories/components/tooltip/tests/examples/validation-error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { Box, Flex } from '@semcore/ui/base-components';
import Button from '@semcore/ui/button';
import Radio, { RadioGroup } from '@semcore/ui/radio';
import Tooltip from '@semcore/ui/tooltip';
import React from 'react';

const Demo = () => {
const [isVisible, setIsVisible] = React.useState(false);

return (
<Flex direction='column'>
<RadioGroup aria-label='RadioGroup example' size='m'>
<Tooltip visible={isVisible} theme='warning'>
<Tooltip.Trigger>
<Radio
label='Value 1'
state={isVisible ? 'invalid' : 'normal'}
value='1'
/>
</Tooltip.Trigger>
<Tooltip.Popper>Choose option!</Tooltip.Popper>
</Tooltip>
<Radio label='Value 2' mb={3} state='normal' value='2' />
</RadioGroup>
<Button onClick={() => setIsVisible(!isVisible)}>
Show validation error
</Button>
</Flex>
);
};

export default Demo;

export const App = () => <Demo />;
Loading