feat: migrate components in tooltip to runes

Author: hperrin

README.md

@@ -197,7 +197,7 @@ Svelte 5 Runes mode is being migrated to slowly. This is the todo list of compon
 - Tabs
   - [x] Tab
   - [x] Tab Bar
-- [ ] Tooltip
+- [x] Tooltip
 - [ ] Touch Target
 
 Note to Devs: update `indexOf()` on any `$state` array to `findIndex()`.

packages/site/src/routes/demo/tooltip/+page.svelte

@@ -23,6 +23,8 @@
   </Demo>
 
   <Demo component={Rich} file="tooltip/_Rich.svelte">Rich</Demo>
+
+  <Demo component={Delayed} file="tooltip/_Delayed.svelte">Delayed</Demo>
 </section>
 
 <script lang="ts">
@@ -31,4 +33,5 @@
   import Simple from './_Simple.svelte';
   import Positioning from './_Positioning.svelte';
   import Rich from './_Rich.svelte';
+  import Delayed from './_Delayed.svelte';
 </script>

packages/site/src/routes/demo/tooltip/_Delayed.svelte

@@ -0,0 +1,13 @@
+<div>
+  <Wrapper>
+    <Button touch>
+      <Label>Show Delay: 1s, Hide Delay: 2s</Label>
+    </Button>
+    <Tooltip showDelay={1000} hideDelay={2000}>I am a delayed tooltip.</Tooltip>
+  </Wrapper>
+</div>
+
+<script lang="ts">
+  import Tooltip, { Wrapper } from '@smui/tooltip';
+  import Button, { Label } from '@smui/button';
+</script>

packages/site/src/routes/demo/tooltip/_Positioning.svelte

@@ -1,5 +1,3 @@
-<svelte:options runes={false} />
-
 <div style="display: flex; flex-wrap: wrap; align-items: center;">
   <Wrapper>
     <Button touch>

packages/site/src/routes/demo/tooltip/_Rich.svelte

@@ -1,5 +1,3 @@
-<svelte:options runes={false} />
-
 <div style="display: flex; flex-wrap: wrap; align-items: center;">
   <!--
     Note: the wrapper on a rich tooltip
@@ -64,5 +62,5 @@
   } from '@smui/tooltip';
   import Button, { Label } from '@smui/button';
 
-  let clicked = 0;
+  let clicked = $state(0);
 </script>

packages/site/src/routes/demo/tooltip/_Simple.svelte

@@ -1,5 +1,3 @@
-<svelte:options runes={false} />
-
 <div
   class="container"
   style="display: flex; flex-wrap: wrap; align-items: center;"
@@ -23,7 +21,8 @@
     <Fab onclick={() => clicked++} mini>
       <Icon class="material-icons">favorite</Icon>
     </Fab>
-    <Tooltip>Tooltip on a FAB.</Tooltip>
+    <!-- The unbounded prop adds more gap between the tooltip and anchor. -->
+    <Tooltip unbounded>Tooltip on a FAB.</Tooltip>
   </Wrapper>
 
   <Wrapper>
@@ -43,13 +42,7 @@
 
   <Wrapper>
     <span tabindex="0" role="button">I'm a span element.</span>
-    <!--
-      For tooltips on things that don't have a
-      visually declared boundary, like plain text,
-      use the `unbounded` prop to remove the gap
-      between the element and the tooltip.
-    -->
-    <Tooltip unbounded>Tooltip on a span.</Tooltip>
+    <Tooltip>Tooltip on a span.</Tooltip>
   </Wrapper>
 </div>
 
@@ -80,9 +73,9 @@
   import Radio from '@smui/radio';
   import { Label, Icon } from '@smui/common';
 
-  let clicked = 0;
-  let checked = false;
-  let selected = 'on';
+  let clicked = $state(0);
+  let checked = $state(false);
+  let selected = $state('on');
 </script>
 
 <style>