feat: new Tooltip component

README.md

@@ -265,6 +265,7 @@ Click a component below to go to its documentation. (Note that this documentatio
   - [Tab](packages/tab/README.md)
   - [Tab Bar](packages/tab-bar/README.md)
 - [Theme](https://sveltematerialui.com/demo/theme/)†
+- [Tooltip](packages/tooltip/README.md)
 - [Top App Bar](packages/top-app-bar/README.md)
 - [Touch Target](packages/touch-target/README.md)
 - [Typography](https://sveltematerialui.com/demo/typography/)†
@@ -275,7 +276,7 @@ New components from the upstream library to build for SMUI v3:
 - [x] Circular Progress
 - [x] Layout Grids (Not new to MDC, but I haven't made a component for it.)
 - [ ] Segmented Buttons (This is different than SMUI's button groups.)
-- [ ] Tooltips
+- [x] Tooltips
 - [x] Touch Target Wrappers
 - [ ] Data Table Pagination
 - [ ] Data Table Progress Indicator

packages/button/Button.svelte

@@ -33,6 +33,7 @@
     'mdc-snackbar__action': context === 'snackbar:actions',
     'mdc-banner__secondary-action': context === 'banner' && secondary,
     'mdc-banner__primary-action': context === 'banner' && !secondary,
+    'mdc-tooltip__action': context === 'tooltip:rich-actions',
     ...internalClasses,
   })}
   style={Object.entries(internalStyles)

packages/chips/Text.svelte

@@ -83,7 +83,6 @@
   }
 
   export function focus() {
-    console.log('focus primary action');
     // Let the tabindex change propagate.
     waitForTabindex(() => {
       primaryAction && primaryAction.focus();

packages/chips/TrailingAction.svelte

@@ -74,7 +74,6 @@
   onMount(() => {
     instance = new MDCChipTrailingActionFoundation({
       focus: () => {
-        console.log('focus trailing action');
         const element = getElement();
         // Let the tabindex change propagate.
         waitForTabindex(() => {

packages/tooltip/Content.js

@@ -0,0 +1,7 @@
+import { classAdderBuilder } from '@smui/common/internal.js';
+import Div from '@smui/common/Div.svelte';
+
+export default classAdderBuilder({
+  class: 'mdc-tooltip__content',
+  component: Div,
+});

packages/tooltip/Link.js

@@ -0,0 +1,7 @@
+import { classAdderBuilder } from '@smui/common/internal.js';
+import A from '@smui/common/A.svelte';
+
+export default classAdderBuilder({
+  class: 'mdc-tooltip__content-link',
+  component: A,
+});

packages/tooltip/README.md

@@ -0,0 +1,29 @@
+# Svelte Material UI - Tooltip
+
+Tooltips display informative content when a user hovers over or interacts with an element.
+
+# Installation
+
+```sh
+npm install --save-dev @smui/tooltip
+```
+
+# Demo
+
+[See it in action.](https://sveltematerialui.com/demo/tooltip)
+
+[See the demo code.](/site/src/routes/demo/tooltip/)
+
+# Basic Usage
+
+todo...
+
+# Exports
+
+todo...
+
+# More Information
+
+See [Tooltips](https://material.io/components/tooltips) in the Material design spec.
+
+See [Tooltip](https://github.com/material-components/material-components-web/tree/v10.0.0/packages/mdc-tooltip) in MDC-Web for information about the upstream library's architecture.

packages/tooltip/RichActions.js

@@ -0,0 +1,10 @@
+import { classAdderBuilder } from '@smui/common/internal.js';
+import Div from '@smui/common/Div.svelte';
+
+export default classAdderBuilder({
+  class: 'mdc-tooltip--rich-actions',
+  component: Div,
+  contexts: {
+    'SMUI:button:context': 'tooltip:rich-actions',
+  },
+});

packages/tooltip/Title.js

@@ -0,0 +1,7 @@
+import { classAdderBuilder } from '@smui/common/internal.js';
+import H2 from '@smui/common/H2.svelte';
+
+export default classAdderBuilder({
+  class: 'mdc-tooltip__title',
+  component: H2,
+});