This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/echarts-examples.git
The following commit(s) were added to refs/heads/dev by this push:
new 39f711a0 (infra): add a tooltip for dat.GUI long truncated labels.
39f711a0 is described below
commit 39f711a093b4efc7057944c472402b2cfab66b2c
Author: 100pah <[email protected]>
AuthorDate: Wed Jul 2 23:53:14 2025 +0800
(infra): add a tooltip for dat.GUI long truncated labels.
---
src/editor/sandbox/setup.js | 49 +++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 49 insertions(+)
diff --git a/src/editor/sandbox/setup.js b/src/editor/sandbox/setup.js
index c2ad8a9a..ecabd9c0 100644
--- a/src/editor/sandbox/setup.js
+++ b/src/editor/sandbox/setup.js
@@ -366,6 +366,8 @@ function setup(isShared) {
});
document.body.append(gui.domElement);
+ initDatGUITooltip(gui.domElement);
+
const configParams = appEnv.configParameters || {};
const config = appEnv.config;
for (const name in config) {
@@ -406,6 +408,53 @@ function setup(isShared) {
}
};
+ /**
+ * Add a tooltip for long label that truncated by dat.GUI.
+ */
+ function initDatGUITooltip(guiEl) {
+ // Add a tooltip for long label that truncated by dat.GUI
+ const tooltip = document.createElement('div');
+ tooltip.className = 'dat-gui-tooltip';
+ document.body.appendChild(tooltip);
+ $(tooltip).css({
+ display: 'none',
+ position: 'absolute',
+ zIndex: 9000,
+ padding: '5px 10px',
+ backgroundColor: '#333',
+ color: '#fff',
+ borderRadius: '4px',
+ fontSize: '12px',
+ pointerEvents: 'none',
+ });
+
+ guiEl.addEventListener('mouseover', function (ev) {
+ const target = ev.target;
+ if (!target) {
+ return;
+ }
+ const labelText =
$(target).filter('.property-name').add($(target).find('.property-name')).first().text();
+ if (!labelText) {
+ return;
+ }
+ $(tooltip).text(labelText);
+ $(tooltip).css({
+ display: 'block',
+ left: ev.pageX + 10 + 'px',
+ top: ev.pageY + 10 + 'px',
+ });
+ });
+
+ guiEl.addEventListener('mouseout', function () {
+ $(tooltip).css({display: 'none'});
+ });
+
+ guiEl.addEventListener('mousemove', function (ev) {
+ tooltip.style.left = ev.pageX + 10 + 'px';
+ tooltip.style.top = ev.pageY + 10 + 'px';
+ });
+ }
+
echarts.registerPreprocessor(function (option) {
if (appStore.enableDecal) {
option.aria = option.aria || {};
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
