0

I've been roaming around to find a fix on this kind of issue. I've been creating a tooltip like div which toggles on mouse enter and mouse leave. It's working as expected in most of latest browsers but not working on safari. It shows the hidden div on mouse enter but it don't hide on mouse leave.

Note: Only show child div when it's parent hovered.

<div class="tooltipParent">
    <span class="hoverMe" rel="tooltip" @mouseover="mouseOver($event)" @mouseLeave="mouseLeave($event)">
       <h5>{{ title }}</h5>
    <span @mouseover="mouseOver($event)" @mouseLeave="mouseLeave($event)" class="money" v-if="user && condition > 0">{{ condition | currency}}</span>
    <span @mouseover="mouseOver($event)" @mouseLeave="mouseLeave($event)" class="money" v-else>$0.00</span>
    </span>

    <div class="bubble hide">
      <h1>Hello world</h1>
    </div>
</div>

Script:

methods : {

   mouseOver(e){
       var $this =  $(e.target);
       var $parent = $this.parents('.tooltipParent').find('.bubble').removeClass('hide');
   },

   mouseLeave(e){
       $('.bubble').addClass('hide');
   }
claudios
  • 6,588
  • 8
  • 47
  • 90

1 Answers1

2

As mentioned by @ceejayoz in comments, you are supposed to let Vue.js handle the class and style bindings. Also you should not mix jQuery and Vue extensively.

In this specific case, you do not need a lot of code, classes or bindings. Here is something that works (in Safari also):

<div>
    <span @mouseover="displayHelloWorld=true" @mouseLeave="displayHelloWorld=false">
       <h5>Your title</h5>
    </span>

    <div class="bubble" v-show="displayHelloWorld">
        <h1>Hello world</h1>
    </div>
</div>

and your Vue instance (no methods needed here!):

new Vue({
    el: '#app',
    data: function() {
        return {
            displayHelloWorld: false
        }
    }
})

Stop using jQuery, and you will discover new design patterns using Vue.js :-)

Mani
  • 23,635
  • 6
  • 67
  • 54
  • Yeah it did work, but I noticed after I hovered the last div and back to the other, the hidden div won't show. – claudios Oct 24 '16 at 05:56
  • Working now after deleting my method. Thanks – claudios Oct 24 '16 at 06:01
  • Got another issue now. data/values inside the div isn't updated – claudios Oct 24 '16 at 06:11
  • Do you mean, the `{{title}}` and `{{condition | currency}}`? It should either be part of `data` or `computed` inside your Vue component. – Mani Oct 24 '16 at 06:13
  • yeah the hidden div contains data that will be updated but it don't update here. maybe I try to use `nextTick()` – claudios Oct 24 '16 at 06:17
  • How are you initializing the data? if you use `this.title` inside your http promise handler, make sure the promise handler uses arrow functions, so that `this` belongs to outer scope. – Mani Oct 24 '16 at 06:18
  • For my earlier comment, refer to this example (first half of this answer): http://stackoverflow.com/a/40145783/654825 - I don't see your code for setting `title`, but you need to ensure that there is no scope issue when you set it. – Mani Oct 24 '16 at 06:22
  • `{{title}}` and `{{condition | currency}}` are working good but there's another `{{condition | currency}}` inside the hidden div. It needs to be updated also. But now it only updated when I reload the page. – claudios Oct 24 '16 at 06:23
  • Can you create another question with some more code from your Vue component? You have only provided mouse event methods here, which is insufficient to check what is causing that issue. – Mani Oct 24 '16 at 06:25
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/126497/discussion-between-claudios-and-mani). – claudios Oct 24 '16 at 08:06