Svelte Tooltip

<script>
  import Tooltip from "sv-tooltip"
</script>

<Tooltip tip="This is a button" bottom>
  <button>Hello</button>
</Tooltip>

Installation

npm i -D sv-tooltip

Active Tooltip

  <Tooltip tip="This is a button" bottom active>
    <button>Hello</button>
  </Tooltip>

Component Tooltip

  <Tooltip tip="This is a button" top>
    <Button>Hello</Button>
  </Tooltip>

Text Tooltip

  <p>
    Something <Tooltip tip="It was actially a dream" top>weird</Tooltip> happened
    last night
  </p>

Colored Tooltip

  <p>
     <Tooltip tip="It was actially a dream" bottom color="#ffff00">Something</Tooltip>
  </p>

Pass HTML to tip

  <Tooltip tip="<marquee>This one moves!</marquee>" top>
    <button>A button</button>
  </Tooltip>
props function
top show tooltip at top
right show tooltip at right
bottom show tooltip at bottom
left show tooltip at left
active show tooltip by default
color hex value to change the color of tooltip

Top categories

svelte logo

Need a Svelte website built?

Hire a professional Svelte developer today.
Loading Svelte Themes