ContextQMD
Back to Lit

01

packages/lit-dev-content/site/tutorials/content/tooltip/01.md

latest1.1 KB
Original Source

The simple-tooltip is used in the my-content element. Since the content is just the element children, the tooltip renders a slot in its shadowRoot. The tooltip is displayed by default which isn't correct, but this makes it easier to add styling. To style the tooltip element itself, add the following properties to the :host selector of simple-tooltip.

simple-tooltip.<ts-js></ts-js>

css
:host {
  display: inline-block;
  position: fixed;
  padding: 4px;
  border: 1px solid darkgray;
  border-radius: 4px;
  background: #ccc;
  pointer-events: none;
}

{% aside "info" "no-header" %}

Learn more about theming, styling, and the :host selector in the Lit documentation.

{% endaside %}

The tooltip should be shown on top of the content it's hinting. Using position: fixed creates a new stacking context which should work fine for the majority of cases.