Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

manual open/close? #18

Closed
ogrotten opened this issue Oct 16, 2023 · 7 comments · Fixed by #20
Closed

manual open/close? #18

ogrotten opened this issue Oct 16, 2023 · 7 comments · Fixed by #20
Assignees
Labels
Priority: Low Bug, issue, or pull request is a P3 Type: Feature A new feature or functionality Type: Proposal Issue or pull requests contains a new proposal

Comments

@ogrotten
Copy link

ogrotten commented Oct 16, 2023

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.

@dysfunc dysfunc added Priority: Low Bug, issue, or pull request is a P3 Type: Feature A new feature or functionality Type: Proposal Issue or pull requests contains a new proposal labels Oct 17, 2023
@dysfunc dysfunc self-assigned this Oct 17, 2023
@dysfunc
Copy link
Contributor

dysfunc commented Oct 17, 2023

I'll add this feature request to the next release.

Feature Description
Expose two new interface properties that define the showAction and hideAction of a tooltip. These properties will accept one of the following DOM event assignments:

  • showAction: click, mousedown, mouseenter.
  • hideAction: click, mouseout, mouseleave.

@ogrotten
Copy link
Author

ogrotten commented Oct 17, 2023

That's pretty cool and useful.

Might it be simpler to make methods that you could call using svelte/html events? That way it can be dealt with directly.

like for example

<div on:mouseleave|stopPropagation={() => tooltip.close()} />

open/close methods could then be used in non-tooltip situations... like for example a ux/ui tutorial, where they'd be fired on elements in a certain order, but only because $: if (tutorialStep === 3)

@dysfunc
Copy link
Contributor

dysfunc commented Oct 17, 2023

I had that thought initially. I could combine all of them so everything is out there. You can be explicit with events or control behavior via callbacks

@ogrotten
Copy link
Author

That sounds great. Thanks and well done.

@dysfunc
Copy link
Contributor

dysfunc commented Nov 9, 2023

After thinking about it, I'm just going to make the show prop bindable and you can control the initial or close behavior by just setting that to true or false

@dysfunc
Copy link
Contributor

dysfunc commented Nov 9, 2023

you'll have something like this now

<script>
  import { Tooltip } from '@svelte-plugins/tooltips';
  
  let isVisible = false;
  
  const hideOnClick = () => (isVisible = false);
</script>

<p>
 This tooltip should appear to the
  <Tooltip
    bind:show={isVisible}
    action="click"
    align="center"      
    content="I should appear to the right."
    position="right">
    <b>right</b>
  </Tooltip>
  when clicked.
</p>

<button on:click={hideOnClick}>Close the tooltip</button>

@ogrotten
Copy link
Author

One of the things I dislike about github is that notifications are very out of the way. I'm always missing stuff.

This looks fabulous thanks for your work!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Priority: Low Bug, issue, or pull request is a P3 Type: Feature A new feature or functionality Type: Proposal Issue or pull requests contains a new proposal
Projects
None yet
2 participants