CSS to change the size of the preview popup?

Things I have tried

Searched the CSS (Cybertron) for suspicious entries, but didn’t find one that seemed the right one.

What I’m trying to do

When hovering over an internal link (in preview mode) a small popup with the content of the linked note shows up-
I’d like to make this popup-window a little bigger, so I need the information which CSS code to change.
Within Websites I would use the ‘Inspector’ (Edge), is there anything alike in Obsidian?

1 Like
.popover.hover-popover {
  max-height:40vh;
  min-height:40px;
}

Play with the values to suit your liking. You can set the vaules in whatever units you like (vh, px, %, etc.)

Indeed there is. Ctrl + Shift + I opens the inspection panel.

2 Likes

Thank you, @Erisred !

You made my day! :slight_smile:

Interesting: I simply should have tried CTRL-SHIFT-I, I use that shortcut often within Edge. :man_shrugging:

1 Like

Hey @Erisred ,

now I stumbled in a new problem:
I just switched templates from cybertron to reverie.
Within the first, there was a tiny border around the popups, what makes them easier to distinguish from the background.

Now I’m trying to apply this to the reverie-theme, but I can’t figure out what the CSS responsible for the border is.

Can you help?
If possible, I would like to have a thin border and a somewhat lighter shadow to improve the 3d-effect of the popups flying over the rest of the text.

Stefan

Edit:
I added this CSS:
.popover.hover-popover {
border: 1px solid darkgrey;
box-shadow: 3px 3px 7px darkgrey;
border-radius: 3px;
}
and it does the job! :slight_smile:

@StefanS - That’s a pretty fancy border! Glad you were able to figure it out!

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.