Skip to content
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.

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

给 showTooltip() 增加一个参数,在调用时传入全局唯一的属性值,添加到 DOM 中 #11440

Closed
TCOTC opened this issue May 17, 2024 · 11 comments

Comments

@TCOTC
Copy link
Contributor

TCOTC commented May 17, 2024

2024.09.24: 类名一大堆也不太好,还是像 #12518 那样用 data-id 好了
2024.09.24: data-id 的命名:入口_子入口_功能或i18n的键名
2024.10.10: 还是复用类名好了,统一一点。并且只在有需要的时候添加

In what scenarios do you need this feature?

export const showTooltip = (message: string, target: Element, error = false) => {

使用户可以按需隐藏 Tooltip ,而不是 .tooltip { display: none; } 就全没了

image

Describe the optimal solution

建议给 showTooltip() 增加一个参数,不同的地方调用时传入不同的 类名(可以传入一个或多个类名) data-id 属性值

Other information

关联 https://ld246.com/article/1715925792926

@TCOTC TCOTC changed the title 建议给 showTooltip() 增加一个参数,不同的地方传入不同的类名 建议给 showTooltip() 增加一个参数,不同的地方调用时传入不同的类名 May 17, 2024
@Vanessa219
Copy link
Member

也许这个可以解决问题 #11109

@TCOTC
Copy link
Contributor Author

TCOTC commented May 17, 2024

不一样,那个是右上角的消息弹窗,用的是 showMessage() ;这个 showTooltip() 是悬浮提示:

image

@TCOTC
Copy link
Contributor Author

TCOTC commented May 19, 2024

@Vanessa219
Copy link
Member

悬浮提示传入不同类名的作用是?
文章已在社区回复。

@TCOTC
Copy link
Contributor Author

TCOTC commented May 19, 2024

悬浮提示传入不同类名的作用是?

举个例子,比如鼠标悬浮在超链接上的时候,会使用 showTooltip(decodeURIComponent(tip), aElement); ,此时如果能传入一个 .tooltip--url 的类名,就可以用下面这个 CSS 把除了超链接以外的悬浮提示隐藏掉:

.tooltip:not(.tooltip--url) {
    display: none;
}

而且不只是超链接,用户会需要自定义其他各种地方的悬浮提示。

这样的话虽然在 tooltip.ts 里加一堆像下面这种条件判断也不是不行,但条件判断越多效率就越低,所以我建议直接从调用 showTooltip() 的地方把类名传进来

if (target.getAttribute("data-inline-memo-content")) {
messageElement.classList.add("tooltip--memo"); // 为行级备注添加 class https://github.com/siyuan-note/siyuan/issues/6161
} else {
messageElement.classList.remove("tooltip--memo");
}

从调用 showTooltip() 的地方传入类名后,在 tooltip.ts 里大概像这样处理:(不知道这段代码逻辑对不对哈)

if (toolTipClass !== "") {
    messageElement.classList.add(toolTipClass);
} else {
    // 获取所有其他的类名
    const otherClasses = Array.from(messageElement.classList).filter(className => className !== 'tooltip');
    // 移除所有其他的类名
    otherClasses.forEach(className => messageElement.classList.remove(className));
}

@Vanessa219
Copy link
Member

单独增加参数可能还不够,需要去对每一项有提示的地方进行配置。

@TCOTC
Copy link
Contributor Author

TCOTC commented May 20, 2024

单独增加参数可能还不够,需要去对每一项有提示的地方进行配置。

默认不需要参数,需要加的时候再加就可以了。

p.s. 先把链接(和备注)的加上,有个用户的需求是隐藏除了链接和备注以外的悬浮提示

@Vanessa219
Copy link
Member

加的时候也需要去配置,否则用法太隐秘了,没人知道这个特性。
后期维护也会很麻烦,比如增加一个类型,是不是需要去更新插件,插件不维护了怎么办?

@TCOTC
Copy link
Contributor Author

TCOTC commented May 22, 2024

我感觉这个更容易维护,否则每增加一个类名就要像下面的代码这样写一种判断。

与其弄一堆 if else ,不如直接在调用函数的时候传入类名。

另外这个跟插件维不维护好像没什么关系?增加类型之后插件按需使用已有的类型就好了(如果不需要的话就用不着新增了)

if (target.getAttribute("data-inline-memo-content")) {
messageElement.classList.add("tooltip--memo"); // 为行级备注添加 class https://github.com/siyuan-note/siyuan/issues/6161
} else {
messageElement.classList.remove("tooltip--memo");
}

@TCOTC
Copy link
Contributor Author

TCOTC commented May 22, 2024

想了想,传入类名之前也要判断,具体怎么实现还是要研究一下调用 showTooltip() 的相关代码。

这个需求也没那么迫切,暂时放着好了,等我有空研究一下再说。

@TCOTC TCOTC changed the title 建议给 showTooltip() 增加一个参数,不同的地方调用时传入不同的类名 ✨建议给 showTooltip() 增加一个参数,不同的地方调用时传入不同的类名 Aug 10, 2024
@88250 88250 changed the title ✨建议给 showTooltip() 增加一个参数,不同的地方调用时传入不同的类名 建议给 showTooltip() 增加一个参数,不同的地方调用时传入不同的类名 Aug 11, 2024
@88250
Copy link
Member

88250 commented Sep 19, 2024

过去时间比较久,暂时先关闭。

@88250 88250 closed this as completed Sep 19, 2024
@TCOTC TCOTC changed the title 建议给 showTooltip() 增加一个参数,不同的地方调用时传入不同的类名 给 showTooltip() 增加一个参数,在调用时传入全局唯一的 data-id 属性值,添加到 DOM 中 Sep 24, 2024
@TCOTC TCOTC changed the title 给 showTooltip() 增加一个参数,在调用时传入全局唯一的 data-id 属性值,添加到 DOM 中 给 showTooltip() 增加一个参数,在调用时传入全局唯一的属性值,添加到 DOM 中 Oct 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants