mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-21 12:49:20 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(tooltip-definition): support reactive open prop

Browse source
This commit is contained in:
Eric Liu 2022-02-01 07:06:04 -08:00
commit 72210bac0d
1 changed files with 9 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/TooltipDefinition/TooltipDefinition.svelte
View file

@ -2,6 +2,11 @@
/** Specify the tooltip text */ /** Specify the tooltip text */
export let tooltipText = ""; export let tooltipText = "";
/**
* Set to `true` to open the tooltip
*/
export let open = false;
/** /**
* Set the alignment of the tooltip relative to the icon * Set the alignment of the tooltip relative to the icon
* @type {"start" | "center" | "end"} * @type {"start" | "center" | "end"}
@ -20,14 +25,12 @@
/** Obtain a reference to the button HTML element */ /** Obtain a reference to the button HTML element */
export let ref = null; export let ref = null;
let visible = false;
function hide() { function hide() {
visible = false; open = false;
} }
function show() { function show() {
visible = true; open = true;
} }
</script> </script>
@ -51,8 +54,8 @@
class:bx--tooltip--a11y="{true}" class:bx--tooltip--a11y="{true}"
class:bx--tooltip__trigger="{true}" class:bx--tooltip__trigger="{true}"
class:bx--tooltip__trigger--definition="{true}" class:bx--tooltip__trigger--definition="{true}"
class:bx--tooltip--hidden="{!visible}" class:bx--tooltip--hidden="{!open}"
class:bx--tooltip--visible="{visible}" class:bx--tooltip--visible="{open}"
class:bx--tooltip--top="{direction === 'top'}" class:bx--tooltip--top="{direction === 'top'}"
class:bx--tooltip--bottom="{direction === 'bottom'}" class:bx--tooltip--bottom="{direction === 'bottom'}"
class:bx--tooltip--align-start="{align === 'start'}" class:bx--tooltip--align-start="{align === 'start'}"