An issue with using a tooltip element in a table

[XeWen]

I’m working on a website using a modified stack theme. I’m having and issue with a tooltip shortcode I made as where it gets cut off when placed in a table.

This is what it looks like normally compared to what it looks like in a table.

When in a table it gets cut off at the edges and also makes a horizontal scroll bar, this does not happen when using it outside of tables.

The table itself is made using Hugo’s markdown and I’m unsure of how to resolve this issue, the markdown for the table itself looks something like this:

|Name|Platforms|Plug-in Formats (Hosts)|License|R|Notes|
|---|---|---|---|:---:|---|
|[Bitwig](https://www.bitwig.com/) |Linux, Windows, MacOS|CLAP, VST2, VST3|[**Proprietary**][6] **$**|✓|{{<tooltip text="I like the horizontal FX rack, probably my fav DAW, but it's proprietary and it also doesn't support LV2 which kind of sucks.">}}Note{{</tooltip>}}|

If it is of any help the code for the tooltip looks like this:

html

<span class="tooltip">
    {{- .Inner | markdownify -}}
    <span class="tooltiptext">
        {{- .Get "text" | markdownify -}}
    </span>
</span>
 {{- /* This comment removes trailing newlines. */ -}}

scss

.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
    text-decoration: underline dotted;
    color: var(--accent-color);
    &:hover {
        color: var(--accent-color-darker);
    }
}

.tooltiptext {
    visibility: hidden;
    width:max-content;
    max-width: 460px;
    background: var(--card-background-hover);
    color: var(--card-text-color-main);
    border-radius: var(--card-border-radius);
    padding: 15px;
    z-index: 1;
    font-size: 1.4rem;
    text-align: left;
    line-height: 1.4;
    font-family: var(--base-font-family);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, -10px);
    opacity: 0;
    transition: all 0.35s ease;
    pointer-events: none; 
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.08), 0px 4px 12px rgba(0, 0, 0, 0.08), 0px 2px 4px rgba(0, 0, 0, 0.08), 0px 0px 1px rgba(0, 0, 0, 0.08);

    &:after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -8px; 
        border-width: 8px;
        border-style: solid;
        border-color: var(--card-background-hover) transparent transparent transparent;
    }
}

[davidsneighbour]

In short: The tooltip is based on the table cell, not the article container.

All your absolute and relative positioning happens in relation to the table cell that the tool tip is in. It might go away just by allowing the text to wrap. But most tooltip libraries have options to set the “parent” container that the tooltip shall be based on, so my guess is that it’s not that easy.

It’s time to go and find a tooltip library like Popper that uses JS to determine if the tooltip has enough space and positions it depending on that. Or you do that yourself manually by adding a class to the tooltip that positions the tooltips in the table row’s third child on top right instead of top left.

[XeWen]

I’d still like to keep the tooltip as just a css thing for now, I could change it up later, but for now I’m trying to keep the website to having fairly simple implementations. I had a similar issue with how the tooltip was getting cut off at the end of the page, but I had resolved that by using a overflow: visible; I had attempted to do the same with my issue with the table, however I was unsure of how to do this due to the fact that the table was generated by Hugo.

I’m planning to resolve this by going with your suggestion of manually adding a class to the tooltip, however I’m still fairly new to making websites and I’m unsure of how to actually implement that, so I’d like to ask for some direction on how to implement such a thing.

[XeWen]

I figured out the solution, I simply added:

.article-content {

    .table-wrapper {
        overflow: visible;
    }

}

Which seemed to resolve my issue.