Sizing around content ... Width is fine, height is missing

[BallisticPain]

So I originally was having trouble getting my Angular component to show up inside the Tippy tooltip. However, I got it working using... Previously I was simply using tippy('.pop-hover', options) where options was the same as below with the exception of the added target for the delegate.

    <script>
        tippy.delegate('body[override]', {
            content(reference) {
                const tooltip = reference.querySelector('.pop-span');
                return tooltip;
            },
            target: '.pop-hover',
            allowHTML: true,
            hideOnClick: false,
            interactive: true,
            placement: 'auto',
        });
    </script>

The .pop-hover and .pop-span were previously a simple CSS tooltip. I needed to attach to the body for another fix which also made my Angular component show up within the width of the tooltip. Below is an image showing the height issue.

Here is the CSS for .pop-hover and .pop-span

.pop-hover {
    position: relative;
    border-bottom: 1px dotted #105b27;
    width: fit-content;
}

.pop-hover span.pop-span {
    position: absolute;
    display: none;
    text-decoration: none;
}

I'm unable to inspect the Tippy bits so am unsure what CSS I may need to add. Any assistance greatly appreciated!

Best regards, Jarvis

[BallisticPain]

So I'm playing around with the CSS now... I thought about programmatically showing the tippy element on the page to see if I can manipulate the CSS to make the box fit the content in height.

[BallisticPain]

Ultimately I don't believe this is the best solution, but for now it works...

div.tippy-box {
    min-height: 29px;
}

If anyone has a better solution, I would love to try it. If this is indeed the best available, let me know and I'll close the issue. I'll wait a few days before just closing it anyways.

Thanks for Tippy!