svelte-plugins/tooltips

A simple tooltip action and component designed for Svelte.

tooltips's Issues

Improve autoposition (container element boundaries)

Hi, first of all thanks for the simple and lean component!

Would you consider improving on the autoposition feature, so that you can optionally specify a containing element?

I'd like to use the tooltip in a modal and the viewport boundaries aren't very helpful for auto positioning.
Here's a REPL: https://svelte.dev/repl/d2afb26070f54cf8af1bc5a7265d814e?version=4.2.0

Using additional on:mouseenter on element

Hi,

Very nice plugin! 🎉

I'm very new to frontend in general, I have an issue adding the tooltip to an element that already has a on:mouseenter when I add the tooltip as seen in my screenshots below. Any idea why this is happening? 🤔

Without the tooltip it is working fine

🐛

Describe the bug
Tried to make a tooltip from tutorial but...

To Reproduce

import { tooltip } from "@svelte-plugins/tooltips";
    
<u title="Hello World!" use:tooltip={{ content: 'weiogjiowej' }}>
        <img class="brand-color-filter" alt={"Verified ass " + verify}
        src={verifyPaths.get(`${verify}`)} />
    </u>

Expected behavior
Working tooltip

Desktop (please complete the following information):

• Version: doesn't matter, it happens in vs code

🐛 Tooltip does not close when clicked

Current behavior:

1. Add a tooltip to the page with the configuration “action = click” and “show = true”
2. When you launch the application, the tooltip will be immediately displayed
3. I click the first time - the tooltip does not close, I click the second time - the tooltip closes

Expected behavior:

1. Add a tooltip to the page with the configuration “action = click” and “show = true”
2. When you launch the application, the tooltip will be immediately displayed
3. I click the first time - the tooltip closes, I click the second time - the tooltip opens again

OS: macOS 14.1.2 (23B92)
Browser: Google Chrome 120.0.6099.129
Plugin version: 2.2.0

🐛 update positioning to handle resizing

Describe the bug
Tooltips need to adjust their positioning during window resize.

Add conditional rendering

Hi, Thanks for creating this great library.

I was wondering whether it's possible to add a prop like "display" that can be set to false which will prevent the tooltip from rendering. I have tried adding visibility:hidden style conditionally but it didnt work. The use case for this is as below

If we dont have user's phone number, render a tooltip prompting the user to add her phone number, otherwise don't render it. Or this can be simply implemented as, if tooltip content or element's title attribute is empty/null dont render the tooltip instead of rendering an empty tooltip like below

Thanks

add manage of white-space: var(--tooltip-white-space);

I would like to add -tooltip-white-space
:root {
--tooltip-background-color: rgba(0, 0, 0, 0.9);
--tooltip-border-radius: 4px;
--tooltip-box-shadow: 0 1px 20px rgba(0, 0, 0, 0.25);
--tooltip-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
'Helvetica Neue', sans-serif;
--tooltip-font-size: 14px;
--tooltip-font-weight: 500;
--tooltip-line-height: 1.25rem;
--tooltip-color: #fff;
--tooltip-offset-x: 0px;
--tooltip-offset-y: 0px;
--tooltip-padding: 12px;
--tooltip-z-index: 100;
--tooltip-arrow-size: 10px;
--tooltip-white-space: pre-wrap;
}

and
.tooltip {
background-color: var(--tooltip-background-color);
box-shadow: var(--tooltip-box-shadow);
border-radius: var(--tooltip-border-radius);
color: var(--tooltip-color);
opacity: 0;
font-family: var(--tooltip-font-family);
font-size: var(--tooltip-font-size);
font-style: normal;
font-weight: var(--tooltip-font-weight);
line-height: var(--tooltip-line-height);
padding: var(--tooltip-padding);
position: absolute;
text-align: left;
visibility: hidden;
white-space: var(--tooltip-white-space);
z-index: var(--tooltip-z-index);
}

.tooltip.show {
opacity: 1;
visibility: visible;
white-space: var(--tooltip-white-space);
}

OffsetY is not working?

I can move the tooltip on the X access by going use:tooltip={{style: offsetX: "50px"}} but replacing offsetX with offsetY it does not move at all. Am I missing something?

🐛 Position: fixed + overflow: scroll bug.

Describe the bug
When the tooltip is used in a container element that has position: fixed and is vertically scrollable the tooltip appears in the incorrect position. The bug gets more dramatic the further you scroll down.

To Reproduce

Steps to reproduce the behavior:

1. Go to Bug Repl
2. Hover the Tooltip text. Tooltip appears in the correct position ✅
3. Scroll down any amount
4. Hover the Tooltip text. Tooltip appears further up on the page than before ❌
5. Continue to scroll down and hover to see the gap grow.

Expected behavior
The tooltip should appear positioned to the right of the Tooltip text at the same height no matter the scroll position and/or container position.

Screenshots

Desktop (please complete the following information):

• OS: [macOS]
• Browser [chrome, safari, firefox]
• Version [3.0.0]

Smartphone (please complete the following information):

n/a: haven't confirm the bug happens on mobile

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
It looks like the containerRef.top value shrinks as you scroll down which might be why the distance/offset from the top shrinks as you scroll further.

A work around for this bug is to:

1. On the parent/wrapping element of the Tooltip set the position: relative attribute
2. Using a global selector (i.e .your-parent-element-class-or-id :global(.tooltip.animation-null.top)) override the inset property on the tooltip with inset: unset !important
3. Add top: 0 !important;. This will need to be adjusted depending on the spacing.

autoPosition not working correctlty inside position: fixed block

Subj.

Add position position fixed mode

Currently, the tooltip puts alongside the original element, and if, for example, the container has overflow: hidden it's broken.
The tooltip shouldn't rely on the original element container.

Thank you!

I just wanted to say thanks for making this awesome plugin !!! Hope you have a nice day :)

🐛 Tooltip has wrong position if it has a parent that's already positioned

If there's an element in the page already positioned (e.g. already using position: absolute or some other form of non-standard positioning), the tooltip will show in the wrong place.

Reproduction: https://svelte.dev/repl/0468e8f7712f4b4fbf33a14ff1be2f0e?version=4.2.8

If the tooltip has any parent already positioned, it should figure out its positioning relative to that parent. Currently, the code assumes it'll always be the first positioned element in the tree.

Typings?

In #4 (comment) it was said that type definitions will be added, but they still seem to not be there. Any update on this? This seems to be the only decent tooltip library for Svelte out there and I'd really like to use it in my Typescript project.

manual open/close?

I have a bit that was "click to open" > "click or mouseout to close" that I'm wanting to replace.

Is there a flag to set or a method that can be fired to manually open/close the item?

I expect not, so therefore, how might the plugin might be modified to do so?

Thanks either way.

🐛 Tooltip has wrong position with positioned parent(s)

Follow up to #29. During discussion of that issue, I encountered a few more cases where the tooltip isn't positioned correctly when the tooltip has parents with absolute and/or relative positioning.

Reproduction: https://svelte.dev/repl/e47685d17ecc47e8a3555531ab6887fc?version=4.2.8

Missing type definition for the tooltip action

index.d.ts is missing the export { tooltip } from "./action";

Suggested fix:

export { default as Tooltip } from "./tooltip.svelte";
export { tooltip } from './action';

(Awesome library by the way, thanks!)

Possibility on onclick

Would be great to have a possibility that it works on click (not on hover).
Szenario: When hovering on an input field show tooltip1. Onclick (or on mobile devices a hover wouldn't work) show an other tooltip

I don't think `hideOnOutsideClick` was merged in 3.0

Describe the bug
Despite the README and your PR referencing it, it doesn't appear to be anywhere in the code?

Screenshots

✨ Don't show multiple tooltips at once

Current behavior:

1. Add two tooltips to the page, in the configuration set the "action = click" for both
2. Click on the first tooltip - it will be displayed
3. Click on the second one - it will be displayed, but the first hint will not be hidden (thus, many hints can be displayed on the screen at the same time)

Desired behavior:

1. Add two tooltips to the page, in the configuration set the "action = click" for both
2. Click on the first tooltip - it will be displayed
3. Click on the second one - it will be displayed, and the first one will be hidden (this way, several tooltips will not be displayed on the screen at the same time)

🐛 When changing the "show" option, the tooltip does not change state

Current behavior:

1. Add a tooltip to the page with the configuration “show = true”
2. When you launch the application, the tooltip will be immediately displayed
3. After 5 seconds, change the “show = false” parameter - the tooltip will not be hidden

Expected behavior:

1. Add a tooltip to the page with the configuration “show = true”
2. When you launch the application, the tooltip will be immediately displayed
3. After 5 seconds, change the “show = false” parameter – the tooltip will be hidden

OS: macOS 14.1.2 (23B92)
Browser: Google Chrome 120.0.6099.129
Plugin version: 2.2.0

can't overwrite max-width style

Sorry, found it in the source that there is a property that I can set. All done all fine.

[obsolete]
The Tooltip gets an inline style element with a max-with property. I can't overwrite it and I have a Link in the tooltip that must fit in but doesn't. (white-space: nowrap;)
But setting this: style={{ maxWidth: '800px' }} only adds an additional style --tooltip-max-width
so the result is: min-width: 178px; max-width: 200px; text-align: left; --tooltip-max-width:800px;

Is there anyway?

🐛 Tooltip has wrong position if it has a parent with absolute position and moved transform

If the tooltip is added to an element that has a parent with absolute position + moved transform, it gets positioned in the wrong place.

Reproduction: https://svelte.dev/repl/0468e8f7712f4b4fbf33a14ff1be2f0e?version=4.2.8

Reading the code (#27) that fixed the initial issue (#25), it looks like if an offsetParent has absolute positioning, it would be easier to just position the tooltip assuming the parent's bounding client rect is the (0, 0) origin, and ignore any previous offsetParents that may exist in the tree. Basically, the code shouldn't expect left and top to determine the actual positioning of the element, but should still get the correct bounding rect using .getBoundingClientRect().

More context: I'm using Svelte Flow, and they define nodes with position: absolute, but move the nodes using transform: translate(...) instead of setting left and top.

removeEventListener bug - tooltip.svelte Line 83

The removeEventListener call in Line 83 of tooltip.svelte should be conditional if the container exists like the addEventListener call further up because currently like this it spills errors in SvelteKit in pre-render.