mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-16 19:01:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(tooltip-definition): export open prop, dispatch open/close events (#1057)

Browse source
This commit is contained in:
metonym 2022-02-09 20:00:38 -08:00 • committed by GitHub
commit 20e61724c1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 55 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/TooltipDefinition/TooltipDefinition.svelte
View file

@ -1,7 +1,17 @@
<script>
/**
* @event {any} open
* @event {any} close
*/
/** Specify the tooltip text */
export let tooltipText = "";
/**
* Set to `true` to open the tooltip
*/
export let open = false;
/**
* Set the alignment of the tooltip relative to the icon
* @type {"start" | "center" | "end"}
@ -20,15 +30,15 @@
/** Obtain a reference to the button HTML element */
export let ref = null;
let visible = false;
import { createEventDispatcher } from "svelte";
function hide() {
visible = false;
}
const dispatch = createEventDispatcher();
function show() {
visible = true;
}
const hide = () => (open = false);
const show = () => (open = true);
$: dispatch(open ? "open" : "close");
</script>
<svelte:window
@ -51,8 +61,8 @@
class:bx--tooltip--a11y="{true}"
class:bx--tooltip__trigger="{true}"
class:bx--tooltip__trigger--definition="{true}"
class:bx--tooltip--hidden="{!visible}"
class:bx--tooltip--visible="{visible}"
class:bx--tooltip--hidden="{!open}"
class:bx--tooltip--visible="{open}"
class:bx--tooltip--top="{direction === 'top'}"
class:bx--tooltip--bottom="{direction === 'bottom'}"
class:bx--tooltip--align-start="{align === 'start'}"