Feature request: mouseover and mouseleave events for individual slides to activate tooltip

[rolandjlevy]

Hi Antoni

I am really enjoying using vueper-slides. I think its great. Thanks for creating it!

I am trying to show / hide a tooltip for each slide in the carousel but can't access the mouseover and mouseleave events for individual slides.

Ideally, I would like to add @mouseOver="active = true" @mouseleave="active = false" to each slide. So that the tooltip div can be toggled. Something like this:

<vueper-slides><vueper-slide v-for="(slide, key) in slides" :key="key" :image="slide.image" @mouseover="active = true" @mouseleave="active = false"></vueper-slide></vueper-slides><div v-if="active" class="tooltip">{{selectedImage}}</div>

Is this something that exists and if not, could you add this feature? I have a demo here: https://repl.it/@rjlevy/Vue-carousel-vueper-slides-v3

Looking forward to hearing from you.

Thanks,
Roland

[antoniandre]

Hi @rolandjlevy,
Thanks for your feedbacks.
Your request makes sense and I will add an option for this on the vueper-slide tag.
will let you know here when available.

[rolandjlevy]

Hi @antoniandre

That's great news - thank you.

Is it also possible to pass the slide object as a parameter of a function so that the rect properties of the slide can be captured to enable the tooltip to position to individual slides? Something like this:

<vueper-slides>
  <vueper-slide 
    v-for="(slide, key) in slides" 
    :key="key" 
    :image="slide.image" 
    @mouseover="showTooltip(slideObject, slide.id)" 
    @mouseleave="active = false">
  </vueper-slide>
</vueper-slides>
<div v-if="active" class="tooltip">{{selectedTooltip}}</div>

In VueJS component:

methods: {
  showTooltip (slideObject, id) {
    console.log(slideObject.top, slideObject.right, slideObject.bottom, slideObject.left);
    console.log(id);
  }
}, 
data: () => ({
  slides: [
    {
      id: '1',
      title: 'Slide 1',
      content: 'Content for slide one',
      image: 'https://picsum.photos/id/575/600/450',
      link: 'https://picsum.photos/id/575/600/450'
    }
  ]
})

Many thanks,
Roland

[rolandjlevy]

Hi @antoniandre,

Here is an updated demo of what I have in mind for the tooltips: https://repl.it/@rjlevy/Vue-carousel-vueper-slides-v3

Many thanks :)
Roland

[antoniandre]

Hi @rolandjlevy,

This is now available from version 1.18.0.
Please refer to the documentation: https://antoniandre.github.io/vueper-slides/#vueper-slide--events.

Use it like that:

Vue template

<vueper-slides>
  <vueper-slide 
    v-for="(slide, key) in slides" 
    :key="key" 
    :image="slide.image" 
    @mouseover="showTooltip" 
    @mouseleave="active = false">
  </vueper-slide>
</vueper-slides>
<div v-if="active" class="tooltip">{{selectedTooltip}}</div>

JS

methods: {
  showTooltip (slide, el) {
    console.log(slide, el)
  }
}

Hope it helps.

[rolandjlevy]

Hi @antoniandre,

Wow, that was quick. Thanks so much!

I have tried to implement the changes but can't get it to work. There isn't anything logging from showTooltip function.

Here is a demo with the new mouseover and mouseleave events
https://repl.it/@rjlevy/Vue-carousel-vueper-slides-v4

Am I doing something wrong?

Roland

[antoniandre]

Hi @rolandjlevy,
Actually I copied from your code the @mouseover but the event name is mouseenter as per the documentation.

Also repl.it seem to not like console log of objects, you can test with console.log(slide.image); as a starter.

Last thing, make sure to hit the latest vueperslides version, in case there is cache write: <script src="https://unpkg.com/vueperslides@1.18.0">.

Cheers.

[rolandjlevy]

Hi @antoniandre,

Great, making those changes fixed the problem, console.log(slide.image) works fine :)

However, console.log(el) gives the following warning:

found in
---> <VueperSlide>
       <VueperSlides>
         <Root>
TypeError: Cannot convert a Symbol value to a string
    at warnNonPresent (https://unpkg.com/vue@2.6.10/dist/vue.js:2048:33)
    at Object.has (https://unpkg.com/vue@2.6.10/dist/vue.js:2092:18)
    at i (https://replbox.repl.it/public/replbox_html.12c63e97a09d0f2da164.bundle.js:247:621)
    at a (https://replbox.repl.it/public/replbox_html.12c63e97a09d0f2da164.bundle.js:247:361)
    at o (https://replbox.repl.it/public/replbox_html.12c63e97a09d0f2da164.bundle.js:323:5269)
    at Ct (https://replbox.repl.it/public/replbox_html.12c63e97a09d0f2da164.bundle.js:323:3330)
    at https://replbox.repl.it/public/replbox_html.12c63e97a09d0f2da164.bundle.js:323:3716
    at u (https://replbox.repl.it/public/replbox_html.12c63e97a09d0f2da164.bundle.js:587:892)
    at s (https://replbox.repl.it/public/replbox_html.12c63e97a09d0f2da164.bundle.js:587:1256)
    at Lt (https://replbox.repl.it/public/replbox_html.12c63e97a09d0f2da164.bundle.js:323:3693)

Any thoughts on why this is happening?

Thanks,
Roland

[rolandjlevy]

Hi @antoniandre,

Its OK, we worked it out, by using the following. So please ignore the last message - there is no problem!

    showTooltip(slide, el) {
      this.rect = el.getBoundingClientRect();
      this.left =  this.rect.left;
    }

Here is an updated demo with the tooltip functionality now working: https://repl.it/@rjlevy/Vue-carousel-vueper-slides-v6-simplified

My colleagues and I have starred this GitHub to say thank you. Also, to show our appreciation we wanted to buy you a drink but seeing as you are on the other side of the world we are sending you a small gift via your website. You really saved us a lot of time and helped us so quickly.

Cheers!
Roland, Shan and Byron from ontrackms.com in London

[antoniandre]

Awesome @rolandjlevy.
You are most welcome and your example makes sense, I also think getBoundingClientRect() is the best way to go.
Thank you for your gift, I appreciate it. And it's great to sometimes see thankful people spreading good vibes.

Happy Wednesday,
Cheers!

Antoni

[rolandjlevy]

Hi @antoniandre,

That's great! 🥇 happy Wednesday to you too. Have a fantastic week

Cheers!
Roland