Question: Boundary Prop (Next)

[bjoern247]

Is there a possibility in the Vue 3 Version to add a boundary in the component version? Because in the old versions there is the prop called boundary, but in the next version there seems to be no such prop: https://vue-tippy.netlify.app/props. Is there the option. Alternatively can I use the popper options property on the Tippy Component Version? Or only if I use the composition api with useTippy?

Thank you in advance

[KABBOUCHI]

Hi, u can pass popperOptions, it should work with all 3 methods.

useTippy(target, {
  popperOptions: {
    modifiers: [
      {
        name: 'preventOverflow',
        options: {
          rootBoundary: 'window',
        },
      },
    ],
  },
})

More info: https://github.com/atomiks/tippyjs/blob/6609fbc3cee8611fb95ab9f381bb926aca20d2f6/MIGRATION_GUIDE.md#if-you-were-using-boundary

[bjoern247]

Thank you!

[bjoern247]

I still don't manage to achieve the desired effect.

My tippy Component:

<label
  class="switcher-label"
  v-for="option in options"
  :id="option.name + option.value"
  :key="option.name"
  @click="selectOption(option.name, option.value, option.parent)">
  <tippy
    arrow
    placement="top"
    interactive
    touch
    animation="scale-subtle"
    :popperOptions="popperOptions"
  >
    {{
      option.name.replace(
        /( - 1-flügelig - 1000mm Breite$)|( - 2-flügelig - 3000mm Breite$)/,
        ""
      )
    }}
    <template #content="{hide}">
      <div class="zf-tooltip-inner">
        <img
          style="width: 100%; height: 100%; max-width: 320px"
          src="https://cdn.pixabay.com/photo/2017/11/10/04/47/image-2935360_960_720.png"
          @click="hide()"
        />
      </div>
    </template>
  </tippy>
</label>

Popper options:

const popperOptions = {
  modifiers: [
    {
      name: 'preventOverflow',
      options: {
        rootBoundary: 'window'
      }
    }
  ]
}

return {
  selectOption, 
  popperOptions
}

Result: first label of v-for shows small tooltip, while all other labels show large tooltip. I don't get why the first one has some boundary applied to it. Pictures:

first label element, smaller with boundary applied

all other label elements, desired behaviour

[KABBOUCHI]

plz try document instead of window

if u still have issues plz create a small example here https://v3.vue.new