Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Tooltip not placed correctly

See original GitHub issue

I have just migrated from 2.1.3 to 4.3.0 and now I have a problem with my tooltips not beeing placed correctly.

In 2.1.3 it looked like this:

And in 4.3.0 it looks like this:

Options I have set:

Vue.use(VueTippy, {
  interactive: true,
  theme: 'light',
  animateFill: false,
  arrow: true,
  arrowType: 'round',
  placement: 'bottom',
  trigger: 'click'
})

Code:

<tippy>
    <template v-slot:trigger>
    <div class="checkout-item-quantity">
        {{ item.node.quantity }}
    </div>
    </template>
    <span>
    <div class="checkout-item-control">
        <NumberPicker
        :number="item.node.quantity"
        :eventmode="true"
        @increase="addItem(item.node.variant.id)"
        @decrease="removeItem(item.node.variant.id)"
        />
        <div class="checkout-item-remove">
        <LoadingIcon v-show="removing" />
        <span
            v-show="!removing"
            @click="
            removeItem(item.node.variant.id, item.node.quantity)
            "
            >Entfernen</span
        >
        </div>
    </div>
    </span>
</tippy>

Issue Analytics

State:
Created 4 years ago
Comments:10 (6 by maintainers)

Top GitHub Comments

2reactions

KABBOUCHIcommented, Jan 23, 2020

plz try v4.3.1

1reaction

pascalmttscommented, Jan 24, 2020

Yeah this works. This was only to let you know 😄

Top Results From Across the Web

javascript - Bootstrap 4.x tooltip not placed correctly when ...

The solution is to set the boundary attribute, whose default is 'scrollParent' to 'window' and everything works as expected.

React bootstrap tooltip overlay is not positioned correctly #5166

I have been working with overlays. I had created a simple tooltip using react bootstrap's Tooltip class. I have created it in such...

Tooltips - Bootstrap

The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element. Trigger the tooltip via JavaScript:...

Positioning - Angular powered Bootstrap

Tooltip ; Typeahead. When the popup is opened, it is positioned correctly next to the target element and fits in the viewport.

Tooltip not displaying correctly on 4.5.7

Hi, I'm trying to set up a tooltip on a label next to a radio button. The label text appears, but a little...