Documentation | Velvet Thunder

Uses Floating UI underneath.

Placement

<DemoSpaceX>
  <VelvetTooltip @placement="top-start" as |tooltip|>
    <VelvetTag {{tooltip.trigger}}>Top Start</VelvetTag>
    <tooltip.Content>
      Lorem ipsum.
    </tooltip.Content>
  </VelvetTooltip>

  <VelvetTooltip @placement="top" as |tooltip|>
    <VelvetTag {{tooltip.trigger}}>Top</VelvetTag>
    <tooltip.Content>
      Lorem ipsum.
    </tooltip.Content>
  </VelvetTooltip>

  <VelvetTooltip @placement="top-end" as |tooltip|>
    <VelvetTag {{tooltip.trigger}}>Top End</VelvetTag>
    <tooltip.Content>
      Lorem ipsum.
    </tooltip.Content>
  </VelvetTooltip>
</DemoSpaceX>

Offset

<DemoSpaceX>
  <VelvetTooltip @offset={{4}} as |tooltip|>
    <VelvetTag {{tooltip.trigger}}>4 Pixels Offset</VelvetTag>
    <tooltip.Content>
      Lorem ipsum.
    </tooltip.Content>
  </VelvetTooltip>

  <VelvetTooltip @offset={{8}} as |tooltip|>
    <VelvetTag {{tooltip.trigger}}>8 Pixels Offset</VelvetTag>
    <tooltip.Content>
      Lorem ipsum.
    </tooltip.Content>
  </VelvetTooltip>

  <VelvetTooltip @offset={{12}} as |tooltip|>
    <VelvetTag {{tooltip.trigger}}>12 Pixels Offset</VelvetTag>
    <tooltip.Content>
      Lorem ipsum.
    </tooltip.Content>
  </VelvetTooltip>
</DemoSpaceX>

Custom Content

<DemoSpaceX>
  <VelvetTooltip as |tooltip|>
    <VelvetAvatar @name="Jake Peralta" {{tooltip.trigger}} />
    {{#if tooltip.isShown}}
      <img
        class="rounded-md w-52"
        src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/5b9d1b46230007.584c7bdd776b5.jpg"
        {{tooltip.content}}
      />
    {{/if}}
  </VelvetTooltip>
</DemoSpaceX>

Show Delay

<DemoSpaceX>
  <VelvetTooltip @showDelay={{0}} as |tooltip|>
    <VelvetTag {{tooltip.trigger}}>0 MilliSeconds</VelvetTag>
    <tooltip.Content>
      Lorem ipsum.
    </tooltip.Content>
  </VelvetTooltip>

  <VelvetTooltip @showDelay={{400}} as |tooltip|>
    <VelvetTag {{tooltip.trigger}}>400 MilliSeconds</VelvetTag>
    <tooltip.Content>
      Lorem ipsum.
    </tooltip.Content>
  </VelvetTooltip>

  <VelvetTooltip @showDelay={{800}} as |tooltip|>
    <VelvetTag {{tooltip.trigger}}>800 MilliSeconds</VelvetTag>
    <tooltip.Content>
      Lorem ipsum.
    </tooltip.Content>
  </VelvetTooltip>
</DemoSpaceX>

Signature

Element

HTMLElement

Blocks

Name	Description	Type
`:default` *	The content of the tooltip.	`[{ Content: WithBoundArgs<typeof VelvetTooltipContent, 'isShown' \| 'modifier'>; isShown: boolean; hide: () => void; show: () => void; toggle: () => void; content: ModifierLike<ContentSignature>; trigger: ModifierLike<TriggerSignature>; }]`

Blocks marked with * are required.

Arguments

Name	Description	Type	Default Value
`@offset`	Offset of the content in pixels relative to the trigger.	`number`	`4`
`@placement`	Placement of the content relative to the trigger.	`Placement`	`"top"`
`@showDelay`	Delay in milliseconds before showing the tooltip.	`number`	`400`
`@strategy`	CSS position of the content.	`Strategy`	`"absolute"`

Arguments marked with * are required.