claudios claudios - 1 month ago 24
jQuery Question

Show and hide a div in safari using vue js issue

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');
}

Answer

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 :-)

Comments