Triggering mouseenter event on v-tooltip does not update the wrapper
See original GitHub issueVersion
1.0.0-beta.31
Reproduction link
https://github.com/begueradj/test-vuetify-tooltip
Steps to reproduce
- In pages/index.vue:
<template>
<component-with-tooltip tooltipText="Some information" />
</template>
<script>
import ComponentWithTooltip from '@/components/ComponentWithTooltip.vue'
export default {
components: { ComponentWithTooltip }
}
</script>
- In components/ComponentWithTooltip.vue:
<template>
<v-container>
<v-row>
<v-col cols="12">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<v-icon v-on="on" color="grey">
help
</v-icon>
</template>
<span>
{{ tooltipText }}
</span>
</v-tooltip>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: 'ComponentWithTooltip',
props: {
tooltipText: {
type: String,
default: ''
}
}
}
</script>
- In test/components/ComponentWithTooltip.vue:
it('2. User interface provides one help icon with tooltip text', async () => {
const icons = wrapper.findAll('.v-icon')
expect(icons.length).toBe(1) // Ok
const helpIcon = icons.at(0)
expect(helpIcon.text()).toEqual('help') // Ok
helpIcon.trigger('mouseenter')
await wrapper.vm.$nextTick()
expect(wrapper.text()).toEqual('science') // why this fails ?
})
What is expected?
I expect when I trigger the mouseenter
event in my test, the wrapper should be updated to show a new text which is the one I defined for the prop.
What is actually happening?
WHen I trigger the mouse event, the wrapper keeps its former state, meaning its only available text is related to the help icon text.
Thank you, Billal BEGUERADJ
Issue Analytics
- State:
- Created 4 years ago
- Comments:16 (8 by maintainers)
Top Results From Across the Web
Triggering mouseenter event on v-tooltip does ... - Vue Forum
I have a Nuxt.js application using Vuetify.js where I have a help icon that displays a tooltip text when you hover on it:...
Read more >mouseenter and mouseleave keep triggering when i have ...
So when I hover over icon the mouseenter and mouseleave events keep triggering so tooltip is flickering and I don't know why.
Read more >Tooltips · Bootstrap v5.2
Triggering tooltips on hidden elements will not work. Tooltips for .disabled or disabled elements must be triggered on a wrapper element.
Read more >Moving the mouse: mouseover/out, mouseenter/leave
The mouseover event occurs when a mouse pointer comes over an element, ... The mouseout event may trigger on #FROM and then immediately ......
Read more >Creating hover events with SyntheticEvent and React Hover
You can't make changes or alter the actual :hover selector through JavaScript ... wrapper that wraps around the browser's native event, ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I think I am missing something. This works for me (added
id
andrequestAnimationFrame
). Removingmousenter
makes it fail, which seems correct. Is there any other problem?Ok, I figured the problem out. It’s because VTooltip uses
requestAnimationFrame
.I got the test to pass:
Try that.
I don’t think is something we can easily fix in VTU.