matyunya / smelte

UI framework with material components built with Svelte and Tailwind CSS
https://smeltejs.com/
MIT License
1.53k stars 114 forks source link

Provide a way or prop to disable Tooltip #244

Open juanjdlt opened 3 years ago

juanjdlt commented 3 years ago

Hello and thanks a lot for crafting Smelte!

I have this case where I attached a Tooltip to a button to tell the user that something is missing in order to continue. So once the user completes some stuff I would like stop showing the tooltip.

After trying and digging around some options I decided to achieve the mentioned issue by setting the .tooltip element , that the component inject , as display:none when the user completes some stuff.

I think is a kind of workaround. It will be nice to pass some prop the the Tooltip component to dynamically stop/disable the ".tooltip" element to be injected.

Snippet example:

<div class:hide-tooltip={someFlag}>
      <Tooltip>
        <div slot="activator">
          <Button contained color="primary">
            Button Label
          </Button>
        </div>
        <span class="text-sm">Tooltip message</span>
     </Tooltip>
</div>

<style>
:global(.hide-tooltip .tooltip) {
    display: none;
}
</style>