mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 18:31:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(tooltip): support align prop from carbon-components v10.25 (#446)

Browse source
This commit is contained in:
Eric Liu 2020-12-05 09:04:53 -08:00 • committed by GitHub
commit 222c7f2899
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 71 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/Tooltip/Tooltip.svelte
View file

@ -1,4 +1,10 @@
<script>
/**
* Set the alignment of the tooltip relative to the icon
* @type {"start" | "center" | "end"}
*/
export let align = "center";
/**
* Set the direction of the tooltip relative to the button
* @type {"top" | "right" | "bottom" | "left"}
@ -205,10 +211,25 @@
data-floating-menu-direction="{direction}"
class:bx--tooltip="{true}"
class:bx--tooltip--shown="{open}"
class:bx--tooltip--top="{direction === 'top'}"
class:bx--tooltip--right="{direction === 'right'}"
class:bx--tooltip--bottom="{direction === 'bottom'}"
class:bx--tooltip--left="{direction === 'left'}"
class:bx--tooltip--align-center="{align === 'center'}"
class:bx--tooltip--align-start="{align === 'start'}"
class:bx--tooltip--align-end="{align === 'end'}"
on:blur="{closeMenu}"
>
<span class:bx--tooltip__caret="{true}"></span>
<slot />
<div
class:bx--tooltip__content="{true}"
tabIndex="-1"
role="dialog"
aria-describedby="{$$props['tooltipBodyId']}"
aria-labelledby="{triggerId}"
>
<slot />
</div>
</div>
{/if}
</div>