Help needed for the css of a tooltip shortcode I've made

support
1

Hey there, I’m currently implementing a tool tip that appears when you mouse over some text using shortcodes. This mostly works pretty well, however I’m having a problem with how it displays.

The CSS looks like this:

    position: relative;
    display: inline-block;
    cursor: pointer;
    text-decoration: underline dotted;

}

.tooltip .tooltiptext {
    visibility: hidden;
    background: var(--card-background);
    color: var(--card-text-color-main);
    font-size: 1.4rem;
    text-align: left;
    border-radius: var(--card-border-radius);
    padding: 15px;
    line-height: 1.4;
    font-family: var(--base-font-family);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1), 0px 4px 12px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.1), 0px 0px 1px rgba(0, 0, 0, 0.1);
}

.tooltip:hover .tooltiptext,
.tooltip:focus .tooltiptext{
    visibility: visible;
    opacity: 1;

It works almost exactly how I want it except for the fact that it for some reason scales vertically and becomes way too tall instead of using more horizontal space. Of course I could always set the width to something like 500px for instance and that does in fact look like how I want it to look. However, the problem is that I want to use this as a short code, it’s supposed to be something that I can reuse again and again in my project and when there isn’t as much text the box is too big.

Hugo Help 2
Hugo Help 21100×1196 95.4 KB

Which is not what I want. Ideally I would like the inline-block to scale to the amount of text without it looking like the first image when there is a lot of text. I’ve tried to fix this myself, however I’ve not been able to. Thanks for any help in advance if you do write a reply, please attempt to not make it too complicated as I’ve literally just started out with webdev 2 days ago.

Edit: I’d like to add, that I am aware there is some ways to do this in Javascript, however I ideally would prefer to keep it strictly as just css.

Edit2: Added html in case

<span class="tooltip">
    {{ .Inner | markdownify }}
    <span class="tooltiptext">
        {{ .Get "text" | markdownify }}
    </span>
</span>
2

This is not related to Hugo at all. And without seeing the relevant HTML, the CSS makes little sense.
You should ask in places focused on CSS and provide a minimal, complete example.

3

Fair enough, I am fairly new to this, so I apologise for any mistakes I’ve made. I’ll check out some css forum or something and I’ll add the html to this post as well in case anyone else might stumble upon this thread.

1 Like