CSS for changing hover based on cssclass

Things I have tried

I found a post on the forum for changing the hover window style:

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

from https://forum.obsidian.md/t/css-to-change-the-size-of-the-preview-popup/15570

This changes the style for every note which is not ideal.

What I’m trying to do

I was wondering if it is possible to change the hover window size based on the file you are hovering over using cssclasses or tags etc? That way when I hover over some files the hover window is large but when I hover over others it’s small.

Thanks for any help provided!

u can use Auto Class plugin (link below). u can add additional css class based on either folder or tag in the note. e.g. if u have a note with #PermanentNote, you can set to add css class .permanent-note and then u can modify the note’s formatting like below

/* for notes without tag #PermanentNote */
.popover.hover-popover {
    max-height:30vh;
    min-height:30px;
}

/* for note with tag #PermanentNote */
.permanent-note .popover.hover-popover {
    max-height:40vh;
    min-height:40px;
}

I like the idea of this but I can’t get the implementation to work. I have copied the code you suggested and added it to a clean test vault as a snippet. I then added the tag #PermanentNote and added both permanent-note and .permanent-note to the classes for the tag. Even after using the tag to a note nothing changes.

Have you tried implementing this? Is there something I have missed? I checked the documentation but it’s pretty sparse.

hmm… you’re right. sorry about that. i use autoclass for sth else, to affect my note but not .hover-popover (although i have a snippet to modify how .hover-popover width that applies to entire vault).

anyway that snippet doesn’t work (just tested it) because when popover is generated, it is created on the parent level (example below).

also at this point, now that i realised that popover is at parent level as opposed to note level, i think it might not be possible to achieve what you want. but perhaps others might potential solution

this is simplified representation

<body>
    <div class="view-content">
        <div class="markdown-preview-view permanent-note">
        </div>
    </div>
    <div class="popover hover-popover">
    </div>
</body>