Commit 0005bc5b authored by Jochen Roth's avatar Jochen Roth Committed by Oliver Hader
Browse files

[BUGFIX] Hide tooltip after scrolling

Will hide all tooltips when scrolling
in the page tree panel to avoid multiple
tooltips to show up and get stuck on screen

Resolves: #87496
Releases: master
Change-Id: Ie4be5c0cc9df01b26c658ac02ddcfdf2a2102c77
Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/68839

Tested-by: default avatarTYPO3com <noreply@typo3.com>
Tested-by: core-ci's avatarcore-ci <typo3@b13.com>
Tested-by: Oliver Bartsch's avatarOliver Bartsch <bo@cedev.de>
Tested-by: Oliver Hader's avatarOliver Hader <oliver.hader@typo3.org>
Reviewed-by: Oliver Bartsch's avatarOliver Bartsch <bo@cedev.de>
Reviewed-by: Oliver Hader's avatarOliver Hader <oliver.hader@typo3.org>
parent 0ec95a1d
......@@ -25,6 +25,7 @@ import {lll} from 'TYPO3/CMS/Core/lit-helper';
import DebounceEvent from 'TYPO3/CMS/Core/Event/DebounceEvent';
import 'TYPO3/CMS/Backend/Element/IconElement';
import 'TYPO3/CMS/Backend/Input/Clearable';
import {Tooltip as BootstrapTooltip} from 'bootstrap';
export type TreeWrapperSelection<TBase extends d3selection.BaseType> = d3selection.Selection<TBase, any, any, any>;
export type TreeNodeSelection = d3selection.Selection<d3selection.BaseType, TreeNode, any, any>;
......@@ -131,6 +132,8 @@ export class SvgTree extends LitElement {
protected networkErrorTitle: string = top.TYPO3.lang.tree_networkError;
protected networkErrorMessage: string = top.TYPO3.lang.tree_networkErrorDescription;
protected tooltipOptions: Partial<BootstrapTooltip.Options> = {};
/**
* Initializes the tree component - created basic markup, loads and renders data
* @todo declare private
......@@ -149,6 +152,13 @@ export class SvgTree extends LitElement {
this.nodesContainer = this.container.select('.nodes') as TreeWrapperSelection<SVGGElement>;
this.iconsContainer = this.svg.select('defs') as TreeWrapperSelection<SVGGElement>;
this.tooltipOptions = {
delay: 50,
trigger: 'hover',
placement: 'right',
container: '#' + this.id,
}
this.updateScrollPosition();
this.loadData();
this.dispatchEvent(new Event('svg-tree:initialized'));
......@@ -1043,14 +1053,7 @@ export class SvgTree extends LitElement {
.attr('class', 'node-icon-locked');
}
Tooltip.initialize('[data-bs-toggle="tooltip"]', {
delay: {
'show': 50,
'hide': 50
},
trigger: 'hover',
placement: 'right'
});
Tooltip.initialize('[data-bs-toggle="tooltip"]', this.tooltipOptions);
this.appendTextElement(nodeEnter);
return nodes.merge(nodeEnter);
......@@ -1061,8 +1064,10 @@ export class SvgTree extends LitElement {
private updateScrollPosition(): void {
this.viewportHeight = this.getBoundingClientRect().height;
this.scrollBottom = this.scrollTop + this.viewportHeight + (this.viewportHeight / 2);
// disable tooltips when scrolling
Tooltip.hide(this.querySelectorAll('[data-bs-toggle=tooltip]'));
// wait for the tooltip to appear and disable tooltips when scrolling
setTimeout(() => {
Tooltip.hide(this.querySelectorAll('.bs-tooltip-end'));
}, <number>this.tooltipOptions.delay)
}
/**
......@@ -1087,6 +1092,7 @@ export class SvgTree extends LitElement {
elementNodeAction.attr('fill', elementNodeBg.style('fill'));
}
}
/**
* node background events
*/
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment