Action icons clipping through their borders

[hintxiv]

Hi very cool project!! I'm trying to add tooltips to my site but I'm getting this visual bug:

The html looks something like this: https://gist.github.com/yumiyafangirl/2735d2fa9dd24a275f7b83ed3e1557a0

Any idea what's going wrong here? I think it has something to do with my existing css??

[SaltedLevity]

There's an issue with how the caps were implemented with a psuedo element. I've restructured that portion which should hopefully amend the issue, but I need @nonowazu's help with fixing the template/conditional bits in vue. PR is in for him to fix and check!

In the short term you can just set the caps to not display with the following in your css:

.xivtooltip-inline-image::before {
    display: none !important;
}
.xivtooltip-thumbnail::before {
    display: none !important;
}

[ghost]

@yumiyafangirl - PR #36 should address this issue, which I cut a new CDN version for (0.1.7), so you'll probably need to update your script and css references to:

• script: https://cdn.jsdelivr.net/npm/vue-xivtooltips@0.1.7/dist/vue-xivtooltips.umd.min.js
• css: https://cdn.jsdelivr.net/npm/vue-xivtooltips@0.1.7/dist/vue-xivtooltips.css

The reason some paths/names changed is because 0.1.7 uses the vue build system, whereas before we were using rollup.

I think with these fixes you can pull out those css changes that Levi suggested before as well.

Let me know if it works for you, and I'll close the issue.

[hintxiv]

It works! Thank you @SaltedLevity and @nonowazu for your quick fixes. I'll close the issue.