Hoverover Pop up that adjusts size depending on note content

[vreithinger]

Things I have tried

My css code as of right now

.popover.hover-popover {
position: absolute;
z-index: var(–layer-popover);
min-height:50vh;
width:50vh;
overflow:hidden;
padding:0;
}

.popover.hover-popover .markdown-embed {
height:50vh;
font-size: 0.85em;
line-height:1.4;
margin-top:-30px;
}
i tried adjusting height, max-height, min-height ect

What I’m trying to do

Right now my hoverover popup is 50vh in height. this is great if the link leads to a big note. however, i have some smaller notes that do not require that kind of screen size. I wondered if it was possible to have the popup adjust its screen size to the note that pops up, i.e.

• if the note is bigger than 50vh → let hoverover popup window be 50vh
• if the note is smaller than 50vh → let hoverover popup window be as big as it has to be for the note to fit

See images

Image 1: in this case, the height of the popup window makes sense

Image 2: in this case, the popup window should not be so tall but rather be fitted to the text

Thank you for your help in advance!

[ZenMoto]

This should accomplish what you want:

.popover.hover-popover > .markdown-embed {
    height: 100%;
    max-height: 50vh;
    overflow: scroll;
}

**

EDIT: Add this too, and the popup will always have the same top position (high center).

.popover.hover-popover.is-loaded {
    top: 25vh !important;
}

And if you want to reduce the pop-preview padding:

.popover.hover-popover > .markdown-embed > .markdown-embed-content > .markdown-preview-view {
    padding: 4px;
}

[vreithinger]

Thank you for your answer. Your solution seems to work, however it also seems to have a negative side effect on where the popup windows open. If the link way down the page, the popup window always opens under the link, i.e. it opens under the screen (see image). do you know what causes that?

Image 1: before. bottom edge of image = edge of screen

Image 2: after. hoverover popup not readable

Thank you a lot for your help!!

[ZenMoto]

Yes, I see what you mean.

You can change it by adding:

.popover.hover-popover.is-loaded {
    top: 25vh !important;
}

Now the popup will always have the same top position (high center).

If you want to style it, add these to that block:

.popover.hover-popover.is-loaded {
    background-color: black;
    border: silver 1px solid;
}

[vreithinger]

Works thank you very much!

[ZenMoto]

And FYI, here’s the way to get those deeply nested/specific class selectors:

1. open dev tools: CMD+OPT+I (on Mac) or F12 (on Windows)

2. right-click on a listed element > Copy > Copy Selector