Skip to content

feat(tooltip): add displayTransition option to control whether to enable the tooltip display transition #20966

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 7 commits into from
May 31, 2025
Merged

feat(tooltip): add displayTransition option to control whether to enable the tooltip display transition #20966

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4385bc6
set tooltip display to none when hide
May 12, 2025
791daf5
chore(tooltip): remove unused option `displayMode`
plainheart May 29, 2025
4e73d95
feat(tooltip): add `displayTransition` option to control the display …
plainheart May 29, 2025
d88a52a
test(tooltip): add test case for `displayTransition` option
plainheart May 29, 2025
a18d636
chore: merge master branch
plainheart May 29, 2025
6e40225
chore: merge 'feat/tooltip/displayTransition' branch
plainheart May 29, 2025
a61f52e
fix(tooltip): only apply fade transition when `displayTransition` is …
plainheart May 30, 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
48 changes: 35 additions & 13 deletions src/component/tooltip/TooltipHTMLContent.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,15 +103,21 @@ function assembleArrow(
return `<div style="${styleCss.join('')}"></div>`;
}

function assembleTransition(duration: number, onlyFade?: boolean): string {
function assembleTransition(duration: number, onlyFadeTransition: boolean, enableDisplayTransition: boolean): string {
const transitionCurve = 'cubic-bezier(0.23,1,0.32,1)';
let transitionOption = ` ${duration / 2}s ${transitionCurve}`;
let transitionText = `opacity${transitionOption},visibility${transitionOption}`;
if (!onlyFade) {
let transitionOption = '';
let transitionText = '';
if (enableDisplayTransition) {
transitionOption = ` ${duration / 2}s ${transitionCurve}`;
transitionText = `opacity${transitionOption},visibility${transitionOption}`;
}
if (!onlyFadeTransition) {
transitionOption = ` ${duration}s ${transitionCurve}`;
transitionText += env.transformSupported
? `,${CSS_TRANSFORM_VENDOR}${transitionOption}`
: `,left${transitionOption},top${transitionOption}`;
transitionText += (transitionText.length ? ',' : '') + (
env.transformSupported
? `${CSS_TRANSFORM_VENDOR}${transitionOption}`
: `,left${transitionOption},top${transitionOption}`
);
}

return CSS_TRANSITION_VENDOR + ':' + transitionText;
Expand Down Expand Up @@ -173,7 +179,12 @@ function assembleFont(textStyleModel: Model<TooltipOption['textStyle']>): string
return cssText.join(';');
}

function assembleCssText(tooltipModel: Model<TooltipOption>, enableTransition?: boolean, onlyFade?: boolean) {
function assembleCssText(
tooltipModel: Model<TooltipOption>,
enableTransition: boolean,
onlyFadeTransition: boolean,
enableDisplayTransition: boolean
) {
const cssText: string[] = [];
const transitionDuration = tooltipModel.get('transitionDuration');
const backgroundColor = tooltipModel.get('backgroundColor');
Expand All @@ -186,8 +197,9 @@ function assembleCssText(tooltipModel: Model<TooltipOption>, enableTransition?:
const boxShadow = `${shadowOffsetX}px ${shadowOffsetY}px ${shadowBlur}px ${shadowColor}`;

cssText.push('box-shadow:' + boxShadow);
// Animation transition. Do not animate when transitionDuration is 0.
enableTransition && transitionDuration && cssText.push(assembleTransition(transitionDuration, onlyFade));
// Animation transition. Do not animate when transitionDuration <= 0.
enableTransition && transitionDuration > 0
&& cssText.push(assembleTransition(transitionDuration, onlyFadeTransition, enableDisplayTransition));

if (backgroundColor) {
cssText.push('background-color:' + backgroundColor);
Expand Down Expand Up @@ -284,6 +296,8 @@ class TooltipHTMLContent {
*/
private _longHideTimeout: number;

private _enableDisplayTransition: boolean;

constructor(
api: ExtensionAPI,
opt: TooltipContentOption
Expand Down Expand Up @@ -376,6 +390,9 @@ class TooltipHTMLContent {
// update alwaysShowContent
this._alwaysShowContent = alwaysShowContent;

this._enableDisplayTransition = tooltipModel.get('displayTransition')
&& tooltipModel.get('transitionDuration') > 0;

// update className
this.el.className = tooltipModel.get('className') || '';

Expand All @@ -395,7 +412,7 @@ class TooltipHTMLContent {
}
else {
style.cssText = gCssText
+ assembleCssText(tooltipModel, !this._firstShow, this._longHide)
+ assembleCssText(tooltipModel, !this._firstShow, this._longHide, this._enableDisplayTransition)
// initial transform
+ assembleTransform(styleCoord[0], styleCoord[1], true)
+ `border-color:${convertToColorString(nearPointColor)};`
Expand Down Expand Up @@ -499,8 +516,13 @@ class TooltipHTMLContent {

hide() {
const style = this.el.style;
style.visibility = 'hidden';
style.opacity = '0';
if (this._enableDisplayTransition) {
style.visibility = 'hidden';
style.opacity = '0';
}
else {
style.display = 'none';
}
Copy link
Member

Choose a reason for hiding this comment

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

I think it's reasonable to add an new option displayTransition.

But if displayTransition: true, this "scroll" problem still happen.
Perhaps the more completely solution could be:

private _displayNoneWhenTransitionEnd: () => void;

show() {
        // ...
        if (this._displayNoneWhenTransitionEnd) {
            el.removeEventListener('transitionend', this._displayNoneWhenTransitionEnd);
        }
}

hide() {
        const el = this.el;
        if (this._displayNoneWhenTransitionEnd) {
            el.removeEventListener('transitionend', this._displayNoneWhenTransitionEnd);
        }
        this._displayNoneWhenTransitionEnd = () => {
            el.style.display = 'none';
        };
        el.addEventListener('transitionend', this._displayNoneWhenTransitionEnd);

}

(But I haven't test that code above.)

env.transform3dSupported && (style.willChange = '');
this._show = false;
this._longHideTimeout = setTimeout(() => this._longHide = true, 500) as any;
Expand Down
8 changes: 3 additions & 5 deletions src/component/tooltip/TooltipModel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,6 @@ export interface TooltipOption extends CommonTooltipOption<TopLevelFormatterPara
*/
trigger?: 'item' | 'axis' | 'none'

displayMode?: 'single' | 'multipleByCoordSys';

/**
* 'auto': use html by default, and use non-html if `document` is not defined
* 'html': use html for tooltip
Expand Down Expand Up @@ -106,13 +104,11 @@ class TooltipModel extends ComponentModel<TooltipOption> {

alwaysShowContent: false,

displayMode: 'single', // 'single' | 'multipleByCoordSys'

renderMode: 'auto', // 'auto' | 'html' | 'richText'

// whether restraint content inside viewRect.
// If renderMode: 'richText', default true.
// If renderMode: 'html', defaut false (for backward compat).
// If renderMode: 'html', defaults to `false` (for backward compat).
confine: null,

showDelay: 0,
Expand All @@ -122,6 +118,8 @@ class TooltipModel extends ComponentModel<TooltipOption> {
// Animation transition time, unit is second
transitionDuration: 0.4,

displayTransition: true,

enterable: false,

backgroundColor: '#fff',
Expand Down
9 changes: 9 additions & 0 deletions src/util/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1303,6 +1303,15 @@ export interface CommonTooltipOption<FormatterParams> {
*/
enterable?: boolean

/**
* Whether enable display transition when show/hide tooltip.
* Defaults to `true` for backward compatibility.
* If set to `false`, the tooltip 'display' will be set to 'none' when hidden.
* @default true
* @since v6.0.0
*/
displayTransition?: boolean

backgroundColor?: ColorString
borderColor?: ColorString
borderRadius?: number
Expand Down
1 change: 1 addition & 0 deletions test/runTest/actions/__meta__.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions test/runTest/actions/tooltip-displayTransition.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

142 changes: 142 additions & 0 deletions test/tooltip-displayTransition.html
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.