Floating tooltips would block the task text when short mode is on

[XDcedar]

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.

Steps to reproduce

Just add short mode option to task query.

Which Operating Systems are you using?

• [x] Android
• [ ] iPhone/iPad
• [ ] Linux
• [ ] macOS
• [X] Windows

Obsidian Version

0.15.9

Tasks Plugin Version

1.11.0

Checks

• [X] I have tried it with all other plugins disabled and the error still occurs

Possible solution

Move floating tooltips a litter higher.

[claremacrae]

Hi @XDcedar, Thanks for the report.

Do you think this is the same as #650 or something different? Thanks.

[XDcedar]

Hi @claremacrae , no it's not the same. Issue 650 says the floating tooltips is blocked by Callout title, so that you are not able to read the text in tooltips. For example: every day for 5 times is blocked by > [!NOTE] Today. While what I mean is that the task text itself is blocked by its tooltip. In my screenshot, it's text very very very very very very very blocked by Test Next Action > Waiting For.

[XDcedar]

By the way, I've tried changing the CSS style in debug tool, and I found that the transform keyword in CSS didn't work. Here is the code I found.

.tooltip.mod-right {
    animation: pop-right 200ms forwards ease-in-out;
    transform: translateY(-50%); /* <-- doesn't work whatever I change its value */
}

[XDcedar]

Oh wait, I did some more tests. It works when I disable the animation part and set transform to translateY(-100%). That is the behaviour I desire. (And of course, the pop-up animation is gone too.) Hope this would help.

[claremacrae]

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

[XDcedar]

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.

[claremacrae]

Hi @XDcedar, Thank you. I'm not a CSS person at all - so this is not an area I would work on. I will be dependent on others offering fixes.

I've just added the 'help wanted' tag on this, in the hope that someone might be able to pick it up and use the information you supplied.

If you would be willing to either create a pull request, or pair with me so we can work on it together, that would be idea.

If interested in pair-working, please use the email address in my GitHub profile to set up a slot.

[XDcedar]

Hi, @claremacrae , I do hope I could help. But I'm not good at CSS too. Changing styles in developer tool is the only thing I know..I've tried searching in this repo and my local plugin folder, but I couldn't find any code containing keyframes or pop-right.. Sorry I didn't help.

[claremacrae]

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

[FabianoLothor]

@claremacrae I would also suggest to add an option to show/hide tooltip or show/hide breadcumbs, showing by default.

[claremacrae]

@FabianoLothor By breadcrumb, do you mean the filename > heading? That is already possible with hide backlink

Or there is a page in the docs about styling backlinks to make them less obtrusive.

What would be the reason for hiding the tooltip? They only show when in short mode and when hovering over a task. So I would have thought not hovering over task would be enough to not show them.

[FabianoLothor]

No @claremacrae I was referring to the tooltip content. It seems like a breadcrumbs to me.

I know the feature appears only when the short mode is enabled, but I was wondering if it wasn't good to have the option of disabled it, as we've for other features like the backlinks, task count, etc.

[claremacrae]

Ok thanks for the clarification.

I was wondering if it wasn't good to have the option of disabled it, as we've for other features like the backlinks, task count, etc.

OK. there’s hundreds of hours worth, if not thousands, of work needed existing feature requests for this plugin.

So whilst I would accept a well written Pull Request for this, I would be looking for a strong justification for it before spending any time on it myself l.

[sirlaughalot90]

Maybe I can give the strong justification. ;-) I recorded a short video indicating a very real problem:

I often link tasks to outside material (in this case an email) to jump right to the thing I need to work on. Yet, this behaviour makes the link unclickable, basically breaking my workflow.

Would be great if this could be avoided somehow.

Thanks (also for the great work in general)

[claremacrae]

@cashew90, thanks for the video. Your best bet right now is to turn off short mode, then the tooltip will not appear.

[HynDuf]

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.

[sirlaughalot90]

Amazing work. This fixes it, thank you!

[claremacrae]

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.