Is there any way to make setter more reusable in Web Components

Here is my code:

class Tooltip extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({mode: 'open'})
  }

  set position(boundingClientRect) {
    this.style.setProperty('--position', checksth(boundingClientRect));
    this.style.setProperty('--left', "0px")
    this.style.setProperty('--right', "0px")
    this.style.setProperty('--bottom', boundingClientRect.y + 100 + "px" )
  }

  // render HTML
  ...
}

customElements.define('x-tooltip', Tooltip)

and then I'am calling it on other js file

const tooltip = document.createElement('x-tooltip')
tooltip.position = document.querySelector('.hover-over').getBoundingClientRect()
document.body.appendChild(tooltip)

The problem is I have an other tooltip that pretty similar to Tooltip component except the position style (might be shown at the top right concer, top left corner, bottom left corner...). One possible solution is to create a new Class like TopLeftTooltip, TopRightTooltip that extends Tooltip override the setter, but I don't want to create multiple component, is that any more clever solution?