fix(tooltip): exchange "self-managed" attribute for "managed" with op…

…posite effect

BREAKING CHANGE: Self management will now be the default when using an "<sp-tooltip>".

packages/action-group/stories/action-group-tooltip.stories.ts

@@ -142,25 +142,29 @@ const template = (args: Properties): TemplateResult => {
         >
             <overlay-trigger>
                 <sp-action-button slot="trigger">Red</sp-action-button>
-                <sp-tooltip slot="hover-content">
+                <sp-tooltip slot="hover-content" managed>
                     This is a cool color.
                 </sp-tooltip>
             </overlay-trigger>
             <overlay-trigger>
                 <sp-action-button slot="trigger">Green</sp-action-button>
-                <sp-tooltip slot="hover-content">
+                <sp-tooltip slot="hover-content" managed>
                     You wouldn't be wrong.
                 </sp-tooltip>
             </overlay-trigger>
             <overlay-trigger>
                 <sp-action-button slot="trigger" value="blue" selected>
                     Blue
                 </sp-action-button>
-                <sp-tooltip slot="hover-content">The sky in spring.</sp-tooltip>
+                <sp-tooltip slot="hover-content" managed>
+                    The sky in spring.
+                </sp-tooltip>
             </overlay-trigger>
             <overlay-trigger>
                 <sp-action-button slot="trigger">Yellow</sp-action-button>
-                <sp-tooltip slot="hover-content">The sun at noon.</sp-tooltip>
+                <sp-tooltip slot="hover-content" managed>
+                    The sun at noon.
+                </sp-tooltip>
             </overlay-trigger>
         </sp-action-group>
         ${!!args.selects

packages/action-group/stories/action-group.stories.ts

@@ -208,23 +208,27 @@ export const selectsMultipleWithTooltips = (
         >
             <overlay-trigger>
                 <sp-action-button slot="trigger">Red</sp-action-button>
-                <sp-tooltip slot="hover-content">
+                <sp-tooltip slot="hover-content" managed>
                     This is a cool color.
                 </sp-tooltip>
             </overlay-trigger>
             <overlay-trigger>
                 <sp-action-button slot="trigger">Green</sp-action-button>
-                <sp-tooltip slot="hover-content">
+                <sp-tooltip slot="hover-content" managed>
                     You wouldn't be wrong.
                 </sp-tooltip>
             </overlay-trigger>
             <overlay-trigger>
                 <sp-action-button slot="trigger">Blue</sp-action-button>
-                <sp-tooltip slot="hover-content">The sky in spring.</sp-tooltip>
+                <sp-tooltip slot="hover-content" managed>
+                    The sky in spring.
+                </sp-tooltip>
             </overlay-trigger>
             <overlay-trigger>
                 <sp-action-button slot="trigger">Yellow</sp-action-button>
-                <sp-tooltip slot="hover-content">The sun at noon.</sp-tooltip>
+                <sp-tooltip slot="hover-content" managed>
+                    The sun at noon.
+                </sp-tooltip>
             </overlay-trigger>
         </sp-action-group>
         <div>Selected:</div>

packages/action-group/test/action-group.test.ts

@@ -906,23 +906,25 @@ describe('ActionGroup', () => {
                         <sp-action-button slot="trigger">
                             First
                         </sp-action-button>
-                        <sp-tooltip slot="hover-content">
+                        <sp-tooltip slot="hover-content" managed>
                             Definitely the first one.
                         </sp-tooltip>
                     </overlay-trigger>
                     <overlay-trigger>
                         <sp-action-button slot="trigger" selected>
                             Second
                         </sp-action-button>
-                        <sp-tooltip slot="hover-content">
+                        <sp-tooltip slot="hover-content" managed>
                             Not the first, not the last.
                         </sp-tooltip>
                     </overlay-trigger>
                     <overlay-trigger>
                         <sp-action-button slot="trigger" class="third">
                             Third
                         </sp-action-button>
-                        <sp-tooltip slot="hover-content">Select me.</sp-tooltip>
+                        <sp-tooltip slot="hover-content" managed>
+                            Select me.
+                        </sp-tooltip>
                     </overlay-trigger>
                 </sp-action-group>
             `

packages/overlay/overlay-trigger.md

@@ -69,7 +69,7 @@ Here a default `<overlay-trigger>` manages content that is triggered by click an
             <sp-button>Press me</sp-button>
         </div>
     </sp-popover>
-    <sp-tooltip slot="hover-content" delayed>Tooltip</sp-tooltip>
+    <sp-tooltip slot="hover-content" delayed managed>Tooltip</sp-tooltip>
     <sp-popover slot="longpress-content" tip>
         <sp-action-group
             selects="single"
@@ -123,7 +123,7 @@ The delivery of hover content can be customized via the `placement` attribute. H
 ```html
 <overlay-trigger placement="right">
     <sp-button slot="trigger">Overlay Trigger</sp-button>
-    <sp-tooltip slot="hover-content" open placement="right">
+    <sp-tooltip slot="hover-content" placement="right" managed>
         Hover Content
     </sp-tooltip>
 </overlay-trigger>

packages/overlay/stories/overlay.stories.ts

@@ -170,7 +170,12 @@ const template = ({ placement, offset, open }: Properties): TemplateResult => {
                             </div>
                         </sp-popover>
 
-                        <sp-tooltip slot="hover-content" delayed tip="bottom">
+                        <sp-tooltip
+                            slot="hover-content"
+                            delayed
+                            tip="bottom"
+                            managed
+                        >
                             Click to open another popover.
                         </sp-tooltip>
                     </overlay-trigger>
@@ -180,6 +185,7 @@ const template = ({ placement, offset, open }: Properties): TemplateResult => {
                 slot="hover-content"
                 ?delayed=${open !== 'hover'}
                 tip="bottom"
+                managed
             >
                 Click to open a popover.
             </sp-tooltip>
@@ -393,7 +399,7 @@ export const edges = (): TemplateResult => {
                 <br />
                 Left
             </sp-button>
-            <sp-tooltip slot="hover-content" delayed open tip="bottom">
+            <sp-tooltip slot="hover-content" delayed tip="bottom" managed>
                 Triskaidekaphobia and More
             </sp-tooltip>
         </overlay-trigger>
@@ -403,7 +409,7 @@ export const edges = (): TemplateResult => {
                 <br />
                 Right
             </sp-button>
-            <sp-tooltip slot="hover-content" delayed open tip="bottom">
+            <sp-tooltip slot="hover-content" delayed tip="bottom" managed>
                 Triskaidekaphobia and More
             </sp-tooltip>
         </overlay-trigger>
@@ -413,7 +419,7 @@ export const edges = (): TemplateResult => {
                 <br />
                 Left
             </sp-button>
-            <sp-tooltip slot="hover-content" delayed open tip="top">
+            <sp-tooltip slot="hover-content" delayed tip="top" managed>
                 Triskaidekaphobia and More
             </sp-tooltip>
         </overlay-trigger>
@@ -423,7 +429,7 @@ export const edges = (): TemplateResult => {
                 <br />
                 Right
             </sp-button>
-            <sp-tooltip slot="hover-content" delayed open tip="top">
+            <sp-tooltip slot="hover-content" delayed tip="top" managed>
                 Triskaidekaphobia and More
             </sp-tooltip>
         </overlay-trigger>
@@ -444,7 +450,7 @@ export const updated = (): TemplateResult => {
                     slot="trigger"
                     style="translate(400px, 300px)"
                 ></overlay-target-icon>
-                <sp-tooltip slot="hover-content" delayed tip="bottom">
+                <sp-tooltip slot="hover-content" delayed tip="bottom" managed>
                     Click to open popover
                 </sp-tooltip>
                 <sp-popover
@@ -483,6 +489,7 @@ export const updated = (): TemplateResult => {
                                 slot="hover-content"
                                 delayed
                                 tip="bottom"
+                                managed
                             >
                                 Click to open another popover.
                             </sp-tooltip>
@@ -505,7 +512,7 @@ export const sideHoverDraggable = (): TemplateResult => {
         <overlay-drag>
             <overlay-trigger placement="right">
                 <overlay-target-icon slot="trigger"></overlay-target-icon>
-                <sp-tooltip slot="hover-content" delayed tip="right">
+                <sp-tooltip slot="hover-content" delayed tip="right" managed>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                     Vivamus egestas sed enim sed condimentum. Nunc facilisis
                     scelerisque massa sed luctus. Orci varius natoque penatibus

packages/overlay/test/overlay-lifecycle.test.ts

@@ -31,7 +31,7 @@ describe('Overlay Trigger - Lifecycle Methods', () => {
                 <sp-action-button slot="trigger">
                     Button with Tooltip
                 </sp-action-button>
-                <sp-tooltip slot="hover-content">
+                <sp-tooltip slot="hover-content" managed>
                     Described by this content on focus/hover. 1
                 </sp-tooltip>
             </overlay-trigger>
@@ -97,7 +97,7 @@ describe('Overlay Trigger - Lifecycle Methods', () => {
                 <sp-action-button slot="trigger">
                     Button with Tooltip
                 </sp-action-button>
-                <sp-tooltip slot="hover-content" delayed>
+                <sp-tooltip slot="hover-content" delayed managed>
                     Described by this content on focus/hover. 2
                 </sp-tooltip>
             </overlay-trigger>

packages/overlay/test/overlay-trigger-hover-click.test.ts

@@ -30,7 +30,7 @@ describe('Overlay Trigger - Hover and Click', () => {
                 <sp-popover slot="click-content" dialog tip>
                     Popover content
                 </sp-popover>
-                <sp-tooltip slot="hover-content" delayed>
+                <sp-tooltip slot="hover-content" delayed managed>
                     Tooltip content
                 </sp-tooltip>
             </overlay-trigger>
@@ -62,7 +62,7 @@ describe('Overlay Trigger - Hover and Click', () => {
                 <sp-popover slot="click-content" dialog tip>
                     Popover content
                 </sp-popover>
-                <sp-tooltip slot="hover-content" delayed>
+                <sp-tooltip slot="hover-content" delayed managed>
                     Tooltip content
                 </sp-tooltip>
             </overlay-trigger>

packages/tooltip/README.md

@@ -1,6 +1,6 @@
 ## Description
 
-`sp-tooltip` allow users to get contextual help or information about specific components when hovering or focusing on them.
+`<sp-tooltip>` elements allow users to get contextual help or information about specific components when hovering or focusing on them. When an `<sp-tooltip>` is delivered without a `managed` attribute the element will bind its presence to the parent element in which it is placed. Non-`managed` `<sp-tooltip>` elements will display when that parent element is hovered or given focus. This requires that that parent be interactive, like an `<sp-button>` or similar. When the `managed` attribute is used, that means that something outside of the `<sp-tooltip>` will be managing its presence, like an `<overlay-trigger>` or similar.
 
 ### Usage
 
@@ -29,16 +29,16 @@ import { Tooltip } from '@spectrum-web-components/tooltip';
 Tooltips can be top, bottom, left, or right.
 
 ```html
-<sp-tooltip open placement="top">Label</sp-tooltip>
+<sp-tooltip open placement="top" managed>Label</sp-tooltip>
 <br />
 <br />
-<sp-tooltip open placement="bottom">Label</sp-tooltip>
+<sp-tooltip open placement="bottom" managed>Label</sp-tooltip>
 <br />
 <br />
-<sp-tooltip open placement="left">Label</sp-tooltip>
+<sp-tooltip open placement="left" managed>Label</sp-tooltip>
 <br />
 <br />
-<sp-tooltip open placement="right">Label</sp-tooltip>
+<sp-tooltip open placement="right" managed>Label</sp-tooltip>
 ```
 
 ## Variants
@@ -48,15 +48,15 @@ Tooltips can be top, bottom, left, or right.
 This is the informative or info variant of Tooltip
 
 ```html
-<sp-tooltip open placement="top" variant="info">Label</sp-tooltip>
-<sp-tooltip open placement="top" variant="info">
+<sp-tooltip open placement="top" variant="info" managed>Label</sp-tooltip>
+<sp-tooltip open placement="top" variant="info" managed>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit
 </sp-tooltip>
-<sp-tooltip open placement="top" variant="info">
+<sp-tooltip open placement="top" variant="info" managed>
     <sp-icon-info slot="icon" size="s"></sp-icon-info>
     Label
 </sp-tooltip>
-<sp-tooltip open placement="top" variant="info">
+<sp-tooltip open placement="top" variant="info" managed>
     <sp-icon-info slot="icon" size="s"></sp-icon-info>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit
 </sp-tooltip>
@@ -67,15 +67,15 @@ This is the informative or info variant of Tooltip
 This is the postive (a.k.a.) success variant of Tooltip
 
 ```html
-<sp-tooltip open placement="top" variant="positive">Label</sp-tooltip>
-<sp-tooltip open placement="top" variant="positive">
+<sp-tooltip open placement="top" variant="positive" managed>Label</sp-tooltip>
+<sp-tooltip open placement="top" variant="positive" managed>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit
 </sp-tooltip>
-<sp-tooltip open placement="top" variant="positive">
+<sp-tooltip open placement="top" variant="positive" managed>
     <sp-icon-checkmark-circle slot="icon" size="s"></sp-icon-checkmark-circle>
     Label
 </sp-tooltip>
-<sp-tooltip open placement="top" variant="positive">
+<sp-tooltip open placement="top" variant="positive" managed>
     <sp-icon-checkmark-circle slot="icon" size="s"></sp-icon-checkmark-circle>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit
 </sp-tooltip>
@@ -86,15 +86,15 @@ This is the postive (a.k.a.) success variant of Tooltip
 This is the negative a.k.a. error variant of Tooltip
 
 ```html
-<sp-tooltip open placement="top" variant="negative">Label</sp-tooltip>
-<sp-tooltip open placement="top" variant="negative">
+<sp-tooltip open placement="top" variant="negative" managed>Label</sp-tooltip>
+<sp-tooltip open placement="top" variant="negative" managed>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit
 </sp-tooltip>
-<sp-tooltip open placement="top" variant="negative">
+<sp-tooltip open placement="top" variant="negative" managed>
     <sp-icon-alert slot="icon" size="s"></sp-icon-alert>
     Label
 </sp-tooltip>
-<sp-tooltip open placement="top" variant="negative">
+<sp-tooltip open placement="top" variant="negative" managed>
     <sp-icon-alert slot="icon" size="s"></sp-icon-alert>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit
 </sp-tooltip>

packages/tooltip/src/Tooltip.ts

@@ -56,8 +56,8 @@ export class Tooltip extends SpectrumElement {
 
     private _tooltipId = `sp-tooltip-describedby-helper-${Tooltip.instanceCount++}`;
 
-    @property({ type: Boolean, attribute: 'self-managed' })
-    public selfManaged = false;
+    @property({ type: Boolean, attribute: 'managed' })
+    public managed = false;
 
     @property({ type: Number, reflect: true })
     public offset = 6;
@@ -210,7 +210,7 @@ export class Tooltip extends SpectrumElement {
 
     private manageTooltip(): void {
         const parentElement = this.parentElement as HTMLElement;
-        if (this.selfManaged) {
+        if (!this.managed) {
             if (this.slot) {
                 this.previousSlot = this.slot;
             }
@@ -244,7 +244,7 @@ export class Tooltip extends SpectrumElement {
     }
 
     protected async update(changed: PropertyValues<this>): Promise<void> {
-        if (changed.has('open') && this.selfManaged) {
+        if (changed.has('open') && !this.managed) {
             if (this.open) {
                 this.openOverlay();
             } else {
@@ -257,7 +257,7 @@ export class Tooltip extends SpectrumElement {
 
     protected updated(changed: PropertyValues<this>): void {
         super.updated(changed);
-        if (changed.has('selfManaged')) {
+        if (changed.has('managed')) {
             this.manageTooltip();
         }
     }

packages/tooltip/stories/tooltip.stories.ts

@@ -69,7 +69,12 @@ export const Default = ({
     text,
 }: Properties): TemplateResult => {
     return html`
-        <sp-tooltip ?open=${open} placement=${placement} variant=${variant}>
+        <sp-tooltip
+            ?open=${open}
+            placement=${placement}
+            variant=${variant}
+            managed
+        >
             ${text}
         </sp-tooltip>
     `;
@@ -154,7 +159,12 @@ export const wIcon = ({
     text,
 }: Properties): TemplateResult => {
     return html`
-        <sp-tooltip ?open=${open} placement=${placement} variant=${variant}>
+        <sp-tooltip
+            ?open=${open}
+            placement=${placement}
+            variant=${variant}
+            managed
+        >
             ${!!variant ? iconOptions[variant]() : html``} ${text}
         </sp-tooltip>
     `;
@@ -288,7 +298,7 @@ const overlaid = (openPlacement: Placement): TemplateResult => {
                         Hover for ${variant ? variant : 'tooltip'} on the
                         ${placement}
                     </sp-button>
-                    <sp-tooltip slot="hover-content" variant=${variant}>
+                    <sp-tooltip slot="hover-content" variant=${variant} managed>
                         ${placement}
                     </sp-tooltip>
                 </overlay-trigger>