search

atomiks / tippyjs

Tooltip, popover, dropdown, and menu library
https://atomiks.github.io/tippyjs/
MIT License
11.78k stars 517 forks source link

Issue with Custom SVG Arrow Rendering on Top of Tippy.js Tooltip #1145

Closed Siyabulela closed 3 months ago

Siyabulela commented 7 months ago

Description:

I've been working with Tippy.js and encountered an issue related to custom SVG arrows in combination with the tooltip. I've replaced the default arrow with a custom SVG, and I'm facing challenges ensuring that the SVG renders correctly on top of the tooltip.

Issue Details:

Screenshot:

Screenshot 2023-11-22 at 17 40 43 Screenshot 2023-11-22 at 17 56 30

CSS Positioning: To make the custom SVG show on top of the tooltip, I've used the following CSS: Screenshot 2023-11-22 at 18 04 07

Desired Outcome:

When the tooltip is forced to show on top of the link, the custom SVG arrow should appear under the tooltip. Question:

How can I ensure that the custom SVG arrow consistently shows on top of the tooltip without relying on CSS hacks? Additional Information:

Tippy.js Version: 6x Browser: Chrome 119.0.6045.159 (Official Build) (arm64)

Siyabulela commented 3 months ago

Closing due to lack of activity. Feel free to reopen if there are further developments.