velt-presence::part(user-avatar)::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(255, 0, 0, 0.5), rgba(0, 255, 0, 0.5));
  pointer-events: none;

Select the part you want to modify

We offer several parts which can be used like classes. Full list below.

The component is encapsulated in Shadow DOM, which is isolated from the normal DOM.


Apply your CSS rules

Set whatever CSS rules you want.

The part lets you target a specific element within a Shadow DOM.


Check out the table below

Reference the table below to see what parts we expose.

Alternatively, you can directly inspect the component HTML to see what parts are available.

Part NameWhat does it do?
tooltipTargets the tooltip container
tooltip-avatarTargets the tooltip avatar
tooltip-textTargets the tooltip text container
user-avatarTargets the user avatar container
more-usersTargets the more users container