Skip to content

A way to destroy the auto update function that ties to the scrolling #14

@CrendKing

Description

@CrendKing

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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions