Skip to content

feat: enhance tooltip animations with custom tooltip delay and duration property#7977

Merged
deleonio merged 1 commit intorelease/2from
l4t2f8-feature/implementiere-schnellere-tooltip-transition
Oct 25, 2025
Merged

feat: enhance tooltip animations with custom tooltip delay and duration property#7977
deleonio merged 1 commit intorelease/2from
l4t2f8-feature/implementiere-schnellere-tooltip-transition

Conversation

@deleonio
Copy link
Copy Markdown
Contributor

@deleonio deleonio commented Jun 25, 2025

Summary

  • document --kolibri-tooltip-transition-delay
  • allow customizing tooltip delay via new property
  • demo tooltip delay property in samples
  • define default CSS variables in theme
  • update tooltip sample with separate buttons for width, duration and delay
  • remove default theme tooltip variables

The A11y and PO reviews will only take place after all other DoD steps have been completed by the Developer:

  • Meaningful pull request title for the release notes
  • Pull request is linked to an issue and all changes relate to the issue
  • Tests to protect this code implemented (if applicable)
  • Manual test performed successfully (if applicable)
  • Documentation or migration has been updated (if applicable)

@deleonio deleonio changed the title Add tooltip delay variable Add tooltip delay and duration CSS property Jun 25, 2025
@deleonio deleonio changed the title Add tooltip delay and duration CSS property feat: enhance tooltip animations with custom tooltip delay and duration property Jun 25, 2025
@deleonio deleonio linked an issue Jun 25, 2025 that may be closed by this pull request
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Jun 25, 2025

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Jun 25, 2025

Hydration Benchmark Report (vs Baseline)

✅ Top 5 Improvements (Best Speedups)

Component Current Baseline Δ% Result
kol-logo 27.5ms 31.6ms -13%
kol-modal 21.3ms 23.5ms -9.4%
kol-popover-button 84.5ms 89.2ms -5.3%
kol-tree-item 80ms 82.5ms -3%
kol-textarea 68.7ms 70.4ms -2.4%

🔻 Flop 5 Regressions (Worst Slowdowns)

Component Current Baseline Δ% Result
kol-drawer 27ms 21.4ms +26.2% 🔻
kol-avatar 28.5ms 23.2ms +22.8% 🔻
kol-indented-text 26.2ms 21.4ms +22.4% 🔻
kol-image 24.5ms 20.1ms +21.9% 🔻
kol-link-group 26.6ms 22.3ms +19.3% 🔻
📋 Show all results
Component Current Baseline Δ% Result
kol-abbr 29.5ms 29.1ms +1.4%
kol-accordion 168.1ms 158.2ms +6.3%
kol-alert 118.2ms 113.7ms +4%
kol-avatar 28.5ms 23.2ms +22.8% 🔻
kol-badge 78ms 75.1ms +3.9%
kol-breadcrumb 93ms 93.6ms -0.6%
kol-button 77.4ms 77.7ms -0.4%
kol-button-group 20.9ms 20.3ms +3%
kol-button-link 69.5ms 62.3ms +11.6% 🔻
kol-card 33.1ms 31.1ms +6.4%
kol-details 157.2ms 159.9ms -1.7%
kol-drawer 27ms 21.4ms +26.2% 🔻
kol-form 36.6ms 37.2ms -1.6%
kol-heading 26.3ms 26ms +1.2%
kol-icon 68.6ms 68.5ms +0.1%
kol-image 24.5ms 20.1ms +21.9% 🔻
kol-indented-text 26.2ms 21.4ms +22.4% 🔻
kol-input-checkbox 149.1ms 148.7ms +0.3%
kol-input-color 73.1ms 72.8ms +0.4%
kol-input-date 80.8ms 75.1ms +7.6%
kol-input-email 76.8ms 73.2ms +4.9%
kol-input-file 69.5ms 66.6ms +4.4%
kol-input-number 75.4ms 72.7ms +3.7%
kol-input-password 74.1ms 71.1ms +4.2%
kol-input-radio 54.1ms 52.4ms +3.2%
kol-input-text 75.5ms 74.8ms +0.9%
kol-link 66.8ms 66.2ms +0.9%
kol-link-button 77.2ms 72.9ms +5.9%
kol-link-group 26.6ms 22.3ms +19.3% 🔻
kol-logo 27.5ms 31.6ms -13%
kol-modal 21.3ms 23.5ms -9.4%
kol-nav 32.3ms 29.9ms +8%
kol-pagination 536.8ms 525.6ms +2.1%
kol-popover-button 84.5ms 89.2ms -5.3%
kol-progress 31.6ms 32ms -1.3%
kol-quote 25.4ms 24.7ms +2.8%
kol-select 91.1ms 89.6ms +1.7%
kol-skip-nav 22.5ms 20.4ms +10.3% 🔻
kol-spin 23.8ms 23.2ms +2.6%
kol-split-button 206.2ms 202.4ms +1.9%
kol-table-stateful 101.5ms 98ms +3.6%
kol-table-stateless 85.6ms 84.1ms +1.8%
kol-tabs 35.4ms 35.4ms 0%
kol-textarea 68.7ms 70.4ms -2.4%
kol-toolbar 36.3ms 34.9ms +4%
kol-tree 27.7ms 26.6ms +4.1%
kol-tree-item 80ms 82.5ms -3%
kol-version 163.7ms 161.3ms +1.5%

@deleonio deleonio marked this pull request as draft June 27, 2025 03:30
@deleonio
Copy link
Copy Markdown
Contributor Author

Es funktioniert noch nicht wie gewünscht.

Comment thread packages/components/src/components/tooltip/style.scss
@deleonio deleonio force-pushed the l4t2f8-feature/implementiere-schnellere-tooltip-transition branch 2 times, most recently from b185963 to 943b940 Compare July 16, 2025 03:37
@deleonio deleonio force-pushed the l4t2f8-feature/implementiere-schnellere-tooltip-transition branch from 943b940 to ecde3aa Compare October 25, 2025 20:11
@deleonio deleonio closed this Oct 25, 2025
@deleonio deleonio force-pushed the l4t2f8-feature/implementiere-schnellere-tooltip-transition branch from ecde3aa to 1c25ecc Compare October 25, 2025 20:15
@deleonio deleonio reopened this Oct 25, 2025
@publicuibot publicuibot bot locked and limited conversation to collaborators Oct 25, 2025
@deleonio deleonio marked this pull request as ready for review October 25, 2025 20:16
@public-ui public-ui unlocked this conversation Oct 25, 2025
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment on lines 8 to +33
.kol-tooltip-wc .tooltip-floating {
opacity: 0;
display: none;
position: fixed;

/* Avoid layout interference - see https://floating-ui.com/docs/computePosition */
top: 0;
left: 0;
/* Can be used to specify the tooltip-width from the outside. Unset by default. */
width: var(--kol-tooltip-width);
/* Can be used to specify the tooltip-width from the outside. Unset by default. */
width: var(--kol-tooltip-width, unset);
max-width: 90vw;
max-height: 90vh;

visibility: hidden;
animation-duration: 0.25s;
animation-direction: normal;
/* Can be used to specify the animation duration from the outside. 250ms by default. */
animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-name: fadeInOpacity;
animation-timing-function: ease-in;

&.hide {
animation-name: hideTooltip;
}

&.show {
animation-name: showTooltip;
}
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P0 Badge Ensure tooltip stays visible after show animation

.tooltip-floating keeps display: none as its base state and the show class only changes the animation name. Because display is not animatable, the value set at 0% in @keyframes showTooltip applies only while the animation runs; after 250 ms the element falls back to the base display: none even though the user is still hovering. The tooltip therefore flashes briefly and then vanishes, breaking tooltip visibility entirely. Add a persistent display: block for the visible state (e.g. on .show or the 100% keyframe) and keep display: none only for the hidden state.

Useful? React with 👍 / 👎.

@deleonio deleonio force-pushed the l4t2f8-feature/implementiere-schnellere-tooltip-transition branch from a32b572 to 6466f9e Compare October 25, 2025 21:01
@deleonio deleonio merged commit cfc938f into release/2 Oct 25, 2025
9 checks passed
@deleonio deleonio deleted the l4t2f8-feature/implementiere-schnellere-tooltip-transition branch October 25, 2025 22:19
@publicuibot publicuibot bot locked and limited conversation to collaborators Oct 25, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

🚀 Feature: Tooltip Transition reduzieren

1 participant