fixes #858

docs/resources/changelog.md

@@ -14,6 +14,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Added the `anchor` property to `<sl-popup>` to support external anchors
 - Added read-only custom properties `--auto-size-available-width` and `--auto-size-available-height` to `<sl-popup>` to improve support for overflowing popup content
 - Added `label` to `<sl-rating>` to improve accessibility for screen readers
+- Added the `base__popup` and `base__arrow` parts to `<sl-tooltip>` [#858](https://github.com/shoelace-style/shoelace/issues/858)
 - Fixed a bug where auto-size wasn't being applied to `<sl-dropdown>` and `<sl-select>`
 - Fixed a bug in `<sl-popup>` that caused auto-size to kick in before flip
 - Fixed a bug in `<sl-popup>` that prevented the `arrow-padding` attribute from working as expected

src/components/tooltip/tooltip.styles.ts

@@ -18,6 +18,7 @@ export default css`
   }
 
   .tooltip::part(popup) {
+    pointer-events: none;
     z-index: var(--sl-z-index-tooltip);
   }
 

src/components/tooltip/tooltip.test.ts

@@ -1,5 +1,6 @@
 import { expect, fixture, html, waitUntil } from '@open-wc/testing';
 import sinon from 'sinon';
+import type SlPopup from '../popup/popup';
 import type SlTooltip from './tooltip';
 
 describe('<sl-tooltip>', () => {
@@ -146,4 +147,15 @@ describe('<sl-tooltip>', () => {
 
     expect(body.hidden).to.be.false;
   });
+
+  it('should not accept pointer events on the tooltip', async () => {
+    const el = await fixture<SlTooltip>(html`
+      <sl-tooltip content="This is a tooltip" open>
+        <sl-button>Hover Me</sl-button>
+      </sl-tooltip>
+    `);
+    const popup = el.shadowRoot!.querySelector<SlPopup>('sl-popup')!;
+
+    expect(getComputedStyle(popup.popup).pointerEvents).to.equal('none');
+  });
 });

src/components/tooltip/tooltip.ts

@@ -26,6 +26,8 @@ import type { CSSResultGroup } from 'lit';
  * @event sl-after-hide - Emitted after the tooltip has hidden and all animations are complete.
  *
  * @csspart base - The component's base wrapper, an `<sl-popup>` element.
+ * @csspart base__popup - The popup's `popup` part. Use this to target the tooltip's popup container.
+ * @csspart base__arrow - The popup's `arrow` part. Use this to target the tooltip's arrow.
  * @csspart body - The tooltip's body.
  *
  * @cssproperty --max-width - The maximum width of the tooltip.
@@ -269,6 +271,10 @@ export default class SlTooltip extends LitElement {
     return html`
       <sl-popup
         part="base"
+        exportparts="
+          popup:base__popup,
+          arrow:base__arrow
+        "
         class=${classMap({
           tooltip: true,
           'tooltip--open': this.open