Tooltip

Basic usage

Hover (default)

<p>Hover (default)</p>
<CTooltip content="Hi, there">
  <CButton slot="trigger" label="Hover Me" />
</CTooltip>
<p>Hover (default)</p>
<CTooltip content="Hi, there">
  <CButton slot="trigger" label="Hover Me" />
</CTooltip>
svelte
Click fold/expand code

Trigger

Hover (default)

Click

Manual

<script lang="ts">
  let show = false
</script>

<p>Hover (default)</p>
<CTooltip content="Hi, there">
  <CButton slot="trigger" label="Hover Me" />
</CTooltip>

<p>Click</p>
<CTooltip content="Hi, there" trigger="click">
  <CButton label="Click Me" slot="trigger" />
</CTooltip>

<p>Manual</p>

<CButton label="Click Me" on:click={() => (show = !show)} />

<CTooltip bind:show content="Hi, there" trigger="manual">
  <p slot="trigger">Click the left button to toggle</p>
</CTooltip>
<script lang="ts">
  let show = false
</script>

<p>Hover (default)</p>
<CTooltip content="Hi, there">
  <CButton slot="trigger" label="Hover Me" />
</CTooltip>

<p>Click</p>
<CTooltip content="Hi, there" trigger="click">
  <CButton label="Click Me" slot="trigger" />
</CTooltip>

<p>Manual</p>

<CButton label="Click Me" on:click={() => (show = !show)} />

<CTooltip bind:show content="Hi, there" trigger="manual">
  <p slot="trigger">Click the left button to toggle</p>
</CTooltip>
svelte
Click fold/expand code

Positions

<script lang="ts">
  let position = 'top'
  const positions: any = [
    'top-start',
    'top',
    'top-end',
    'left-start',
    'left',
    'left-end',
    'right-start',
    'right',
    'right-end',
    'bottom-start',
    'bottom',
    'bottom-end',
  ]
</script>

<div class="grid grid-cols-3 gap-4">
  <CRadioGroup bind:value={position} options="{positions.map(pos => ({ label: pos, value: pos }))}" />
  <CTooltip {position} content={`Hi, I'm some message from ${position}!`}>
    <CButton label="Hover me to see the effect" slot="trigger" />
  </CTooltip>
</div>
<script lang="ts">
  let position = 'top'
  const positions: any = [
    'top-start',
    'top',
    'top-end',
    'left-start',
    'left',
    'left-end',
    'right-start',
    'right',
    'right-end',
    'bottom-start',
    'bottom',
    'bottom-end',
  ]
</script>

<div class="grid grid-cols-3 gap-4">
  <CRadioGroup bind:value={position} options="{positions.map(pos => ({ label: pos, value: pos }))}" />
  <CTooltip {position} content={`Hi, I'm some message from ${position}!`}>
    <CButton label="Hover me to see the effect" slot="trigger" />
  </CTooltip>
</div>
svelte
Click fold/expand code

CTooltip Props

  • content
    string
    default:

    The content text of tooltip

  • position
    string
    default: top

    The tooltip popup position

  • trigger
    'hover' | 'click' | 'manual'
    default: hover

    The trigger method

  • show
    boolean
    default: false

    Determine the tooltip content is shown or not. Usful when the trigger method is set to 'manual'

CTooltip Events

No data

CTooltip Slots

  • trigger

    The trigger content

  • default

    The tooltip content. Notice that this slot will override the content prop

CTooltip Exports

No data
Suggest changes to this page
Last update at: 2023/08/13 04:44:07