Hovering links - tooltip background doesn't match text boundary, runoff

[luckman212]

Details

• Obsidian 0.13.0 (installer v0.12.19)
• macOS 11.6->12.0.1 (probably doesn’t matter)

Steps

1. open help vault
2. make a new note
3. paste in a few external links (long ones)
4. switch to preview mode
5. hover the links
6. You will see the dark background ends before the white text – seems like the text on long links is not wrapping properly or should be truncated with an ellipsis

Video

https://user-images.githubusercontent.com/1992842/133807994-2118f5ee-ce84-4d91-9859-303bba127e84.gif(image larger than 4 MB)

[zhongdongy]

My quick fix here:

Add these lines of customize CSS to your snippet in “.obsidian/snippets/obsidian.css” (if that is your file). And you need to enable customize CSS first of course.

div.tooltip.mod-top {
  max-width: fit-content;
  word-break: break-all;
}

Hope this helps you.

Before:
Before changing Obsidian tooltip css

After:
After changing Obsidian tooltip css

[luckman212]

Thanks @zhongdongy for the quick fix. Seems to work!

Now if I could just make the tooltip delay a bit longer before popping up…

[zhongdongy]

In this case, can you try this one:

div.tooltip {
  animation: pop-down 1s forwards ease-in-out;
}
div.tooltip.mod-right,
div.tooltip.mod-left
 {
  animation: pop-right 1s forwards ease-in-out;
}

div.tooltip {
  max-width: fit-content;
  word-break: break-all;
}

@keyframes pop-down {
  0%{
    opacity: 0;
    display: none;
  }
  80% {
    opacity: 0;
    transform: translateX(-50%) scale(1);
    display: block;
  }
  88% {
    opacity: 0.7;
    transform: translateX(-50%) scale(1.02);
  }
  96% {
    opacity: 1;
    transform: translateX(-50%) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}
@keyframes pop-right {
  0%{
    opacity: 0;
    display: none;
  }
  80% {
    opacity: 0;
    transform: translateY(-50%) scale(1);
    display: block;
  }
  88% {
    opacity: 0.7;
    transform: translateY(-50%) scale(1.02);
  }
  96% {
    opacity: 1;
    transform: translateY(-50%) scale(1.05);
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

The tooltip will wait for 1 seconds before popping up. Replace the original snippet I shared.

[luckman212]

Wow! This is cool @zhongdongy

TIL about animation: and @keyframes

CSS is a deep rabbit hole.

[WhiteNoise]

will be fixed in 0.13.7