Utility
Styling
Tooltips allow you to place extra information or markup in a container which
can be opened as dismissed as necessary. Tooltips are bound to elements in
the DOM, and are dismissed automatically when the window receives a click
event. If you want to process a click event somewhere else without
dismissing a tooltip, make sure to use
on:click|stopPropagation
.
<script>
import { Tooltip } from '@thetinkerinc/colibri';
import style from './style.js';
let element;
let open = false;
</script>
<button
id="trigger"
bind:this={element}
on:click={() => (open = !open)}>
Open a tooltip
</button>
<Tooltip {element} {style} bind:open>
Hi! I'm in a tooltip.
</Tooltip>
<style>
#trigger {
padding: 0.5rem 1rem;
background: white;
border: 1px solid #d1d5db;
border-radius: 0.25rem;
cursor: default;
}
</style>
Props
style:
Object Slots
default:
Events
This component doesn't emit any events
Styling
borderRadius:
Overrides:
--colibri-border-radius
backgroundColor:
Overrides:
--colibri-neutral-color
maxWidth:
//style.js
export default style = {};