[🐞]Tooltip.Trigger limitations, incorrect documentation example, and suggestions for improvement

[bline]

Which package is affected?

Headless Kit

Describe the bug

I recently encountered a challenge while using the Tooltip.Trigger component in my Qwik application. Because the trigger is implemented as a <button>, it creates conflicts when I need to use it with custom button components that might render <a> tags or other interactive elements. This limitation led to invalid HTML (nested buttons) and forced me to implement workarounds.

Additionally, the documentation example at https://qwikui.com/docs/headless/tooltip/ shows an incorrect usage of the component:

import { component$ } from '@builder.io/qwik';
import { Tooltip } from '@qwik-ui/headless';

export default component$(() => {
  return (
    <Tooltip.Root delayDuration={800} gutter={4} flip placement="top">
      <Tooltip.Trigger>
        <button>Hover or Focus me</button>
      </Tooltip.Trigger>
      <Tooltip.Panel aria-label="Tooltip content">
        <Tooltip.Arrow width={10} height={5} />
        Tooltip content here
      </Tooltip.Panel>
    </Tooltip.Root>
  );
});

This example nests a <button> inside another <button>, which is invalid HTML and results in an error.

To improve the flexibility, reusability, and correctness of the tooltip component, I would suggest:

Fixing the documentation: Correct the example in the documentation to avoid the nested button issue.
Exploring alternative implementations: Consider alternatives like a renderless component or an as prop to allow users to attach tooltip functionality to any element.
I believe these changes would make the tooltip component more versatile and easier to integrate into various use cases.

Reproduction

https://github.com/qwikifiers/qwik-ui/blob/main/packages/kit-headless/src/components/tooltip/tooltip-trigger.tsx

Steps to reproduce

16:41:02 [ERROR] <button> can not be rendered because one of its ancestor is already a <button>.

This goes against the HTML spec: https://html.spec.whatwg.org/multipage/dom.html#interactive-content

System Info

System:
    OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
    CPU: (8) x64 AMD Ryzen 5 1400 Quad-Core Processor
    Memory: 9.50 GB / 15.54 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 20.18.2 - /usr/bin/node
    npm: 11.1.0 - /usr/bin/npm
  Browsers:
    Chrome: 133.0.6943.53
  npmPackages:
    @builder.io/qwik: ^1.12.0 => 1.12.0 
    @qwik-ui/headless: ^0.6.5 => 0.6.5

Additional Information

No response

[vptill]

Would be great to see this happen, currently can't use it because of the nested button issue.