deploy: 61ca720

assets/packages/@rhds/elements/elements/rh-tooltip/rh-tooltip.css

@@ -1,27 +1,40 @@
-/* WARNING: properties containing `__`are deprecated and will be removed */
-
-:host([position="left"]),
-:host([position="right"]) {
-  --_text-alignment: "start";
+:host {
+  display: inline;
 }
 
-#rh-container {
-  display: contents;
+#container {
+  display: inline-flex;
+  position: relative;
+  max-width: 100%;
 
+  /* WARNING: properties containing `__`are deprecated and will be removed */
   --_floating-arrow-size: var(--rh-tooltip-arrow-size,
     var(--rh-tooltip__arrow--Width, 11px));
 }
 
-.dark {
-  --rh-tooltip-content-background-color: var(--rh-color-surface-lightest, #ffffff);
-  --rh-tooltip-content-color: var(--rh-color-text-primary-on-light, #151515);
+#tooltip,
+#tooltip:after {
+  position: absolute;
 }
 
 #tooltip {
-  line-height: var(--rh-line-height-body-text, 1.5);
-  max-width: var(--rh-tooltip-max-width, var(--rh-tooltip--MaxWidth, 18.75rem));
+  display: block;
+  opacity: 0;
+  pointer-events: none;
+  z-index: 10000;
+  transition: opacity 300ms cubic-bezier(0.54, 1.5, 0.38, 1.11) 0s;
   text-align: var(--_text-alignment, center);
+  word-break: break-word;
+  translate: var(--_floating-content-translate);
+  width: max-content;
+  top: 0;
+  left: 0;
+  will-change: opacity;
+  line-height: var(--rh-line-height-body-text, 1.5);
   box-shadow: var(--rh-box-shadow-sm, 0 2px 4px 0 rgba(21, 21, 21, 0.2));
+  max-width: var(--rh-tooltip-max-width, var(--rh-tooltip--MaxWidth, 18.75rem));
+
+  /* WARNING: properties containing `__`are deprecated and will be removed */
   padding:
     var(--rh-tooltip-content-padding-block-start,
       var(--rh-tooltip__content--PaddingTop, var(--rh-space-lg, 16px)))
@@ -31,15 +44,66 @@
       var(--rh-tooltip__content--PaddingBottom, var(--rh-space-lg, 16px)))
     var(--rh-tooltip-content-padding-inline-start,
       var(--rh-tooltip__content--PaddingLeft, var(--rh-space-lg, 16px)));
+
+  /* WARNING: properties containing `__`are deprecated and will be removed */
   font-size: var(--rh-tooltip-content-font-size,
     var(--rh-tooltip__content--FontSize, var(--rh-font-size-body-text-sm, 0.875rem)));
+
+  /* WARNING: properties containing `__`are deprecated and will be removed */
   color: var(--rh-tooltip-content-color,
     var(--rh-tooltip__content--Color, var(--rh-color-text-primary-on-dark, #ffffff)));
   background-color: var(--rh-tooltip-content-background-color,
     var(--rh-tooltip__content--BackgroundColor, var(--rh-color-surface-darkest, #151515)));
 }
 
 #tooltip:after {
+  display: block;
+  content: "";
+  rotate: 45deg;
+  width: var(--_floating-arrow-size);
+  height: var(--_floating-arrow-size);
+  will-change: left top right bottom;
+
+  /* WARNING: properties containing `__`are deprecated and will be removed */
   background-color: var(--rh-tooltip-content-background-color,
     var(--rh-tooltip__content--BackgroundColor, var(--rh-color-surface-darkest, #151515)));
 }
+
+.open #tooltip {
+  opacity: 1;
+}
+
+/* PLAIN */
+.left #tooltip:after          { right: calc(-0.5 * var(--_floating-arrow-size)); }
+.top #tooltip:after           { top: calc(100% - 0.5 * var(--_floating-arrow-size)); }
+.right #tooltip:after         { right: calc(100% - 0.5 * var(--_floating-arrow-size)); }
+.bottom #tooltip:after        { bottom: calc(100% - 0.5 * var(--_floating-arrow-size)); }
+
+/* CENTER */
+.left.center #tooltip:after   { top: calc(50% - 0.5 * var(--_floating-arrow-size)); }
+.top.center #tooltip:after    { right: calc(50% - 0.5 * var(--_floating-arrow-size)); }
+.right.center #tooltip:after  { top: calc(50% - 0.5 * var(--_floating-arrow-size)); }
+.bottom.center #tooltip:after { right: calc(50% - 0.5 * var(--_floating-arrow-size)); }
+
+/* START */
+.left.start #tooltip:after    { top: var(--_floating-arrow-size); }
+.top.start #tooltip:after     { left: var(--_floating-arrow-size); }
+.right.start #tooltip:after   { top: var(--_floating-arrow-size); }
+.bottom.start #tooltip:after  { left: var(--_floating-arrow-size); }
+
+/* END */
+.left.end #tooltip:after      { bottom: var(--_floating-arrow-size); }
+.top.end #tooltip:after       { right: var(--_floating-arrow-size); }
+.right.end #tooltip:after     { bottom: var(--_floating-arrow-size); }
+.bottom.end #tooltip:after    { right: var(--_floating-arrow-size); }
+
+:host([position="left"]),
+:host([position="right"]) {
+  --_text-alignment: "start";
+}
+
+.dark {
+  --rh-tooltip-content-background-color: var(--rh-color-surface-lightest, #ffffff);
+  --rh-tooltip-content-color: var(--rh-color-text-primary-on-light, #151515);
+}
+

assets/packages/@rhds/elements/elements/rh-tooltip/rh-tooltip.d.ts

@@ -1,19 +1,41 @@
-import type { Placement } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
-import { BaseTooltip } from '@patternfly/elements/pf-tooltip/BaseTooltip.js';
+import { LitElement } from 'lit';
+import { type Placement } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
 /**
- * A tooltip is a floating text area that provides helpful or contextual information on hover, focus, or tap.
+ * A tooltip is a floating text area that provides helpful
+ * or contextual information on hover, focus, or tap.
+ *
  * @summary Reveals a small area of information on hover
  *
- * @slot - Place element content here
+ * @slot - Place invoking element here,
+ *         i.e. the element which when hovered the tooltip will display.
+ *         Must be inline content.
+ * @slot content - Place tooltip content here. Overrides the `content` attribute.
  *
+ * @cssprop {<length>} [--rh-tooltip-arrow-size=11px]
+ * @cssprop {<color>} [--rh-tooltip-content-background-color=#ffffff]
+ * @cssprop {<color>} [--rh-tooltip-content-color=#151515]
+ * @cssprop {<length>} [--rh-tooltip-max-width=18.75rem]
+ * @cssprop {<length>} [--rh-tooltip-content-padding-block-start=16px]
+ * @cssprop {<length>} [--rh-tooltip-content-padding-inline-end=16px]
+ * @cssprop {<length>} [--rh-tooltip-content-padding-block-end=16px]
+ * @cssprop {<length>} [--rh-tooltip-content-padding-inline-start=16px]
+ * @cssprop {<absolute-size> | <relative-size> | <length> | <percentage>} [--rh-tooltip-content-font-size=0.875rem]
  */
-export declare class RhTooltip extends BaseTooltip {
+export declare class RhTooltip extends LitElement {
+    #private;
     static readonly version = "{{version}}";
     static readonly styles: import("lit").CSSResult[];
-    private on?;
+    /** The position of the tooltip, relative to the invoking content */
     position: Placement;
+    /** Tooltip content. Overridden by the content slot */
     content?: string;
+    private on?;
+    connectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
+    /** Show the tooltip */
+    show(): Promise<void>;
+    /** Hide the tooltip */
+    hide(): Promise<void>;
 }
 declare global {
     interface HTMLElementTagNameMap {