-
Notifications
You must be signed in to change notification settings - Fork 9
Closed
Labels
bugSomething isn't workingSomething isn't working
Description
In this demo, I have a button that triggers a floating tooltip when mouse enter, and remove the tooltip when mouse leave. Obviously I want the onComputed() to run when the tooltip is showing. However, there doesn't seem to be an easy way to turn it off on-demand when the tooltip is hidden. As a result, you can see the console message keeps printing.
I know you mentioned in #8 that autoUpdate() is unavoidable when the tooltip is out of view. But what I'm asking is a way to completely reset the whole floating-ui back to before the first call to floatingContent().
Or is this request more appropriate for the upstream?
<script lang="ts">
import { createFloatingActions } from 'svelte-floating-ui'
let showTooltip = false
const [floatingRef, floatingContent] = createFloatingActions({
onComputed({ placement, middlewareData }) {
if (!showTooltip) {
console.log('I dont want to see this')
}
},
})
</script>
<div style="overflow:auto; height: 500px; width:500px; border: 1px solid;">
<div style="width:500px; height: 1200px; display:flex; align-items: center; justify-content: center;">
<button on:mouseenter={() => (showTooltip = true)} on:mouseleave={() => (showTooltip = false)} use:floatingRef>Hello</button>
{#if showTooltip}
<div style="position:absolute; border: 1px solid; padding:4px;" use:floatingContent>Tooltip is a long one</div>
{/if}
</div>
</div>Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
bugSomething isn't workingSomething isn't working