docs(popover-examples): simplify floating styles

Author: maiieul

apps/website/src/routes/docs/headless/popover/examples/floating-intro.tsx

@@ -22,7 +22,7 @@ export default component$(() => {
           }}
           popoverTargetAction="show"
           popovertarget="anchor-ref-id"
-          class="rounded-base border-2 border-slate-300 bg-slate-800 px-3 py-1 text-white"
+          class="popover-trigger"
         >
           Hover over me
         </PopoverTrigger>
@@ -35,7 +35,7 @@ export default component$(() => {
         placement="top"
         gutter={4}
         id="anchor-ref-id"
-        class="my-transition listbox rounded-base border-2 border-slate-300 bg-slate-800 !p-4 text-white shadow-md"
+        class="popover listbox !p-4"
       >
         I am anchored to the trigger!
       </Popover>

apps/website/src/routes/docs/headless/popover/examples/anchor-ref.tsx renamed to apps/website/src/routes/docs/headless/popover/examples/floating.tsx

@@ -170,7 +170,10 @@ The browser support for these is similar to support of the popover API. That sai
 
 ```css
 .my-transition {
-  transition: opacity 0.5s, display 0.5s, overlay 0.5s;
+  transition:
+    opacity 0.5s,
+    display 0.5s,
+    overlay 0.5s;
 
   /* on new-line so the declaration is valid in all browsers */
   transition-behavior: allow-discrete;
@@ -287,26 +290,14 @@ useTask$(async ({ track }) => {
 
 ## Floating Behavior
 
-<Showcase name="floating-intro" />
+<Showcase name="floating" />
 
 To use the popover API with floating elements, you can add the `floating={true}` prop to the Popover component. This API enables the use of JavaScript to dynamically position the listbox using the `top` & `left` absolute properties.
 
 > Enabling the `floating={true}` property will introduce a slight increase in code size, as we currently utilize JavaScript to implement floating items. We've strived to keep it as minimal as possible, but powerful in building complex components in anticipation of the forthcoming anchor API.
 
 To float an element, it must have an anchored element to latch onto. This can be done with the `anchorRef` prop.
 
-Below is a mini tooltip implementation enabled by anchor behavior. Keep in mind, this is not accessible, but an example of how this API can be used. We strongly suggest using the Qwik UI Tooltip component.
-
-### AnchorRef Prop
-
-<Showcase name="anchor-ref" />
-
-### Floating Prop
-
-This API is purposely opt-in / incremental. At some point JavaScript will not be needed here at all, and so we want to ensure a smooth migration path when that becomes widely supported.
-
-We chose not to use an Anchor polyfill here due to the difference in bundle size compared to a JavaScript implementation.
-
 ## **Configuring the Listbox**
 
 The `Popover` component is designed for positioning elements that float and facilitating interactions with them.