obsidian-tasks: Floating tooltips would block the task text when short mode is on

Expected Behavior

Floating tooltips don’t block the task text.

Current behaviour

Here is an example, notice that tooltip blocks the text. My cursor is on the forth task. test task

Steps to reproduce

Just add short mode option to task query.

Which Operating Systems are you using?

Android
iPhone/iPad
Linux
macOS
Windows

Obsidian Version

0.15.9

Tasks Plugin Version

1.11.0

Checks

I have tried it with all other plugins disabled and the error still occurs

Possible solution

Move floating tooltips a litter higher.

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 18 (1 by maintainers)

Commits related to this issue

fix: Tooltip pop up above the description of task in short mode Tooltip used to have `mod-right` animation which block the task text in short mode. Fixes #1147 — committed to HynDuf/obsidian-tasks by HynDuf a year ago
fix: Tooltip pops up above task description in short mode (#1735) Tooltip used to have `mod-right` animation which block the task text in short mode. Fixes #1147 — committed to obsidian-tasks-group/obsidian-tasks by HynDuf a year ago

Most upvoted comments

Hi, any progress? I found something new. At first I thought it didn’t work because transform was incompatible with animation. After searching I found a thread in css-tricks forum. It says that animation will override the transform if you set both of them. And after some trial-and-error I found that it works fine If you change the transform part in @keyframes pop-right from translateY(-50%) to translateY(-100%). And it still works even if you disable the transform: translateY(-50%) in .tooltip.mod-right. Here is the change that I made So I guess change @keyframes pop-right would fix this bug. Hope this could help.

I found a way (might be just a workaround) to implement this.

Add this CSS to the end of .obsidian/plugins/obsidian-tasks-plugin/styles.css in your vault folder.

.tooltip.fix {
    animation: pop-right-fix 200ms forwards ease-in-out;
}
@keyframes pop-right-fix {
  0% {
    opacity: 0;
    transform: translateY(-100%) scale(1);
  }
  20% {
    opacity: 0.7;
    transform: translateY(-100%) scale(1.02);
  }
  40% {
    opacity: 1;
    transform: translateY(-100%) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(-100%) scale(1);
  }
}

After that, open .obsidian/plugins/obsidian-tasks-plugin/main.js and search for tooltip. There will be a line with n.addClasses(["tooltip", "mod-right"]). Replace mod-right with fix.

Restart Obsidian and it will work. Thank @XDcedar for this. I would have wasted a lot more time without your discovers.

I could make a PR on this but the solution is kind of a workaround and not necessarily clean.

HynDuf on Mar 4, 2023

I could make a PR on this but the solution is kind of a workaround and not necessarily clean.

Hi @HynDuf, thank you - a PR a would be very welcome, if you have the time at some point.

claremacrae on Mar 7, 2023

@XDcedar Thank you, and no problem at all. Your comments will likely give someone else clues!

claremacrae on Nov 17, 2022

@XDcedar - wow. Thank you very much indeed for the help!

claremacrae on Sep 17, 2022