diff --git a/.changeset/brave-numbers-glow.md b/.changeset/brave-numbers-glow.md new file mode 100644 index 0000000000..df5bfe5098 --- /dev/null +++ b/.changeset/brave-numbers-glow.md @@ -0,0 +1,5 @@ +--- +'@skeletonlabs/skeleton-svelte': patch +--- + +feat: Implement `arrow` for Tooltip diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml index 1a9375fbce..3b7320fc2b 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.yml +++ b/.github/ISSUE_TEMPLATE/bug_report.yml @@ -1,6 +1,7 @@ name: 🐞 Bug description: Report an issue or bug labels: [bug] +type: Bug body: - type: textarea attributes: @@ -29,6 +30,26 @@ body: id: reproduction attributes: label: Link to Reproduction / Stackblitz + - type: textarea + attributes: + label: Environment Information + description: Relevant information about your environment. Use `npx envinfo --system --npmPackages "@skeletonlabs/*" --binaries --browsers` to get this information. + placeholder: | + System: + OS: Windows 11 10.0.26100 + CPU: (12) x64 12th Gen Intel(R) Core(TM) i5-12400 + Memory: 4.72 GB / 15.78 GB + Binaries: + Node: 22.11.0 - C:\Program Files\nodejs\node.EXE + Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD + npm: 10.2.0 - C:\Program Files\nodejs\npm.CMD + pnpm: 9.6.0 - ~\AppData\Local\pnpm\pnpm.CMD + Browsers: + Edge: Chromium (130.0.2849.46) + Internet Explorer: 11.0.26100.1882 + npmPackages: + @skeletonlabs/skeleton: ^3.0.0-next.10 => 3.0.0-next.10 + @skeletonlabs/skeleton-react: ^1.0.0-next.13 => 1.0.0-next.13 - type: textarea attributes: label: More Information diff --git a/.github/ISSUE_TEMPLATE/docs_issue.yml b/.github/ISSUE_TEMPLATE/docs_issue.yml index 0425522cd7..90f72d4828 100644 --- a/.github/ISSUE_TEMPLATE/docs_issue.yml +++ b/.github/ISSUE_TEMPLATE/docs_issue.yml @@ -1,6 +1,7 @@ name: 📗 Report Docs Issue description: Use this to report a typo or incorrect information. labels: [documentation] +type: Task body: - type: input id: link diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml index 7fc6da0622..ea1e5a0b64 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.yml +++ b/.github/ISSUE_TEMPLATE/feature_request.yml @@ -1,6 +1,7 @@ name: 🛠️ Request New Feature description: Let us know what you would like to see added. labels: ['feature request'] +type: Feature body: - type: textarea id: description diff --git a/packages/skeleton-svelte/src/lib/components/Tooltip/Tooltip.svelte b/packages/skeleton-svelte/src/lib/components/Tooltip/Tooltip.svelte index 9d7f584b3e..d0a6255ad0 100644 --- a/packages/skeleton-svelte/src/lib/components/Tooltip/Tooltip.svelte +++ b/packages/skeleton-svelte/src/lib/components/Tooltip/Tooltip.svelte @@ -9,6 +9,7 @@ let { open = $bindable(false), disabled = false, + arrow = false, // Base base = '', classes = '', @@ -24,6 +25,10 @@ contentBase = '', contentBackground = '', contentClasses = '', + // Arrow + arrowBase = '', + arrowBackground = '!bg-white', + arrowClasses = '', // Snippets trigger, content, @@ -65,6 +70,12 @@ {#if api.open}
+ + {#if arrow} +
+
+
+ {/if}
{@render content?.()} @@ -72,3 +83,10 @@
{/if} + + diff --git a/packages/skeleton-svelte/src/lib/components/Tooltip/types.ts b/packages/skeleton-svelte/src/lib/components/Tooltip/types.ts index 27c31cd125..d76083f88b 100644 --- a/packages/skeleton-svelte/src/lib/components/Tooltip/types.ts +++ b/packages/skeleton-svelte/src/lib/components/Tooltip/types.ts @@ -6,6 +6,8 @@ export interface TooltipProps extends Omit { open?: boolean; /** Disable the trigger element of the tooltip */ disabled?: boolean; + /** Enable display of the popover arrow. */ + arrow?: boolean; // Base --- /** Set base classes for the root element. */ @@ -37,6 +39,14 @@ export interface TooltipProps extends Omit { /** Provide arbitrary styles for the content. */ contentClasses?: string; + // Arrow --- + /** Set base classes for the arrow. */ + arrowBase?: string; + /** Set background classes for the arrow. */ + arrowBackground?: string; + /** Provide arbitrary classes for the arrow. */ + arrowClasses?: string; + // Snippets --- /** Provide the template contents inside the trigger button. */ trigger?: Snippet; diff --git a/sites/next.skeleton.dev/src/examples/components/popover/ExampleTooltip.svelte b/sites/next.skeleton.dev/src/examples/components/popover/ExampleTooltip.svelte index e89b370733..51aaf4a553 100644 --- a/sites/next.skeleton.dev/src/examples/components/popover/ExampleTooltip.svelte +++ b/sites/next.skeleton.dev/src/examples/components/popover/ExampleTooltip.svelte @@ -9,6 +9,7 @@ triggerBase="underline" contentBase="card preset-filled p-4" openDelay={200} + arrow > {#snippet trigger()}Hover Me{/snippet} {#snippet content()}This is a tooltip.{/snippet}