.mp-tooltip-wrapper(
  class={
    'mp-tooltip-hidden': visibility === 'hidden',
    'mp-tooltip-transitioning': visibility === 'transitioning',
  }
  style=Object.assign({
    // It's necessary to set the width on the wrapper to be max-width so that the .mp-tooltip-main element has
    // enough width available from the parent to grow up to the max-width.
    'width': $attrs[`max-width`],
  }, wrapperStyles),
  on={
    click: $helpers.stopPropagation,
    mousedown: $helpers.stopPropagation,
  }
)
  .mp-tooltip-main(
    class={
      [`mp-tooltip-placement-${$attrs[`placement`]}`]: true,
      [`mp-tooltip-type-${$helpers.getType()}`]: true,
    }
    style=Object.assign({
      'max-width': $attrs[`max-width`],
    }, mainStyles)
  )
    slot
    if !$attrs[`hide-arrow`]
      .mp-tooltip-arrow