Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot pass button type to Tooltip Component #3204

Closed
mpt777 opened this issue Feb 9, 2025 · 3 comments
Closed

Cannot pass button type to Tooltip Component #3204

mpt777 opened this issue Feb 9, 2025 · 3 comments
Labels
bug Something isn't working
Milestone

Comments

@mpt777
Copy link

mpt777 commented Feb 9, 2025

Current Behavior

Below is an exmaple Tooltip code found on the https://next.skeleton.dev/docs/integrations/popover/svelte/#tooltip

<script lang="ts">
  import { Tooltip } from '@skeletonlabs/skeleton-svelte';
  let openState = $state(false);
</script>

<Tooltip
  bind:open={openState}
  positioning={{ placement: 'top' }}
  triggerBase="underline"
  contentBase="card preset-filled p-4"
  openDelay={200}
  arrow
>
  {#snippet trigger()}Hover Me{/snippet}
  {#snippet content()}This is a tooltip.{/snippet}
</Tooltip>

Currently, I believe it is impossible to pass the button type through this component and into the tooltip component.
https://github.com/skeletonlabs/skeleton/blob/next/packages/skeleton-svelte/src/lib/components/Tooltip/Tooltip.svelte

This makes tooltip's tricky to use within an HTML form, as clicking it will always submit

Expected Behavior

I would like to pass a "type" via the tooltip component, or some arbitrary props to the button.

Steps To Reproduce

  1. Use the Tooltip component within a form
  2. Try to pass a "type" prop
  3. The tooltip will always submit when clicked

Link to Reproduction / Stackblitz

No response

More Information

No response

@mpt777 mpt777 added the bug Something isn't working label Feb 9, 2025
@Sarenor
Copy link
Contributor

Sarenor commented Feb 9, 2025

I'd even go one step further and say that a tooltip button should never be able to submit a form and that we should probably just hardcode type="button" here: https://github.com/skeletonlabs/skeleton/blob/next/packages/skeleton-svelte/src/lib/components/Tooltip/Tooltip.svelte#L67

@endigo9740
Copy link
Contributor

endigo9740 commented Feb 10, 2025

Yeah, what Sarenor said. This button should be fixed as type="button". I'd welcome a PR with this change, not just for Tooltips, but for ALL four types of Svelte popovers.

@endigo9740 endigo9740 added this to the v3.0 (Next) milestone Feb 10, 2025
@phamduylong
Copy link
Contributor

phamduylong commented Feb 10, 2025

Yeah, what Sarenor said. This button should be fixed as type="button". I'd welcome a PR with this change, not just for Tooltips, but for ALL four types of Svelte popovers.

Combobox fixed. Idiot me didn't think this through to include the other popovers.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants