matyunya / smelte

UI framework with material components built with Svelte and Tailwind CSS

Home Page:https://smeltejs.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Provide a way or prop to disable Tooltip

juanjdlt opened this issue · comments

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>