Svelma

<script>
  import { Button, Tooltip} from 'svelma'
</script>

<Tooltip label="Tooltip left" position="is-left">
  <Button>Left</Button>
</Tooltip>

<Tooltip label="Tooltip top">
  <Button>Top (default)</Button>
</Tooltip>

<Tooltip label="Tooltip bottom" position="is-bottom">
  <Button>Bottom</Button>
</Tooltip>

<Tooltip label="Tooltip right" position="is-right">
  <Button>Right</Button>
</Tooltip>

Sizes

<Tooltip label="Tooltip left" size="is-small"> <Button>Small</Button> </Tooltip>
<Tooltip label="Tooltip bottom"> <Button>Medium</Button> </Tooltip>
<Tooltip label="Tooltip right" size="is-large"> <Button>Large</Button> </Tooltip>

Color

<Tooltip label="Tooltip primary"> <Button>Primary</Button> </Tooltip>
<Tooltip label="Tooltip success" type="is-success"> <Button>Success</Button> </Tooltip>
<Tooltip label="Tooltip danger" type="is-danger"> <Button>Danger</Button> </Tooltip>
<Tooltip label="Tooltip warning" type="is-warning"> <Button>Warning</Button> </Tooltip>
<Tooltip label="Tooltip info" type="is-info"> <Button>Info</Button> </Tooltip>
<Tooltip label="Tooltip link" type="is-link"> <Button>Link</Button> </Tooltip>
<Tooltip label="Tooltip light" type="is-light"> <Button>Light</Button> </Tooltip>
<Tooltip label="Tooltip dark" type="is-dark"> <Button>Dark</Button> </Tooltip>

Styles

<Tooltip label="Tooltip rounded" rounded={true}> <Button>Rounded</Button> </Tooltip>
<Tooltip label="Tooltip square" square={true}> <Button>Square</Button> </Tooltip>
<Tooltip label="Tooltip dashed" dashed={true}> <Button>Dashed</Button> </Tooltip>
<Tooltip label={"Tooltip\nmultilined"} multilined={true}> <Button>Multilined</Button> </Tooltip>
<Tooltip label="Not animated" animate={false}> <Button>Not Animated</Button> </Tooltip>
<Tooltip label="Not active" active={false}> <Button>Inactive</Button> </Tooltip>
<Tooltip label="Tooltip always" always={true} position="is-bottom"> <Button>Always</Button> </Tooltip>

Advanced

<Tooltip label="Tooltip customized" animate={{x: 50, duration: 2000}}> <Button>Customized Animation</Button> </Tooltip>
<Tooltip label="Long Tooltip" style="width: 180px"> <Button>Custom Styles</Button> </Tooltip>

API

Name	Description	Type	Values	Default
`type`	Type (color) of the tooltip, optional	String	`is-white`, `is-black`, `is-light`, `is-dark`, `is-primary`, `is-info`, `is-success`, `is-warning`, `is-danger`, `and any other colors you've set in the $colors list on Sass`	`is-primary`
`active`	Whether tooltip is active or not, optional	Boolean	—	`true`
`label`	Tooltip text	String	—	—
`position`	Tooltip position in relation to the element, optional	String	`is-top`, `is-bottom`, `is-top-left`, `is-top-right`, `is-bottom-left`, `is-bottom-right`	`is-top`
`always`	Tooltip will be always active, optional	Boolean	—	`false`
`animate`	Tooltip will have fly animation, customizable, optional	Boolean, Object	—	`true`
`square`	Tooltip will be square (not rounded corners), optional	Boolean	—	`false`
`dashed`	Tooltip slot will have a dashed underline, optional	Boolean	—	`false`
`multilined`	Tooltip will be multilined, optional	Boolean	—	`false`
`size`	Tooltip multiline size (only works for multilined tooltips), optional	String	`is-small`, `is-medium`, `is-large`	`is-medium`
`rounded`	Tooltip will be fully rounded on left and right edges, optional	Boolean	—	`false`
`style`	Tooltip style override, optional	String	—	—