CODEWITHSUNDEEP
javascriptjqueryhtml
Ajey
Ajey

Reputation: 8222

Jquery mouseleave & mouseenter issue

How do I allow the user to click on the button that says "click me" appears on mouseenter of another button.

Here is the code - 

<div class="hint"> ?</div>

<div class="desc">
    This is supposed to appear on hover
    This is supposed to appear on hover
    This is supposed to appear on hover
    This is supposed to appear on hover
    <button type="button">
        Click me
    </button>
</div>

$(document).ready(function() {

  var hint = $('.hint');
  var desc = $('.desc');

  hint.mouseenter(function() {
    desc.show();
  });

   hint.mouseleave(function() {
    desc.hide();
  });
});

Here is the Demo

Upvotes: 1

Views: 101

Answers (7)

Marvin Medeiros
Marvin Medeiros

Reputation: 252

$(function(){
 $('.desc').hide();

 $(document).on('mouseenter','.hint',function(){
  $('.desc').show();
 })

});

Upvotes: 0

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

Updated Fiddle.

If you can't change the structure of your HTML code try to wait a little before hidding a desc div using setTimeout() so if the user enter mouse inside this div you will not hide it by clearing the timeout check the example bellow :

$(document).ready(function() {
    var hide_timeout;
    var hide_after = 100; //100 ms

    var hint = $('.hint');
    var desc = $('.desc');

    hint.mouseenter(function() {
      desc.show();
    });

     hint.mouseleave(function() {
       hide_timeout = setTimeout(function(){
          desc.hide();
       },hide_after);

    });

     desc.mouseenter(function() {
      clearTimeout(hide_timeout);
    });

    desc.mouseleave(function() {
      desc.hide();      
    });
});

Hope this helps.

    $(document).ready(function() {
        var hide_timeout;
        var hide_after = 100; //100 ms

        var hint = $('.hint');
        var desc = $('.desc');

        hint.mouseenter(function() {
          desc.show();
        });

         hint.mouseleave(function() {
           hide_timeout = setTimeout(function(){
              desc.hide();
           },hide_after);

        });

         desc.mouseenter(function() {
          clearTimeout(hide_timeout);
        });

        desc.mouseleave(function() {
          desc.hide();  	
        });
    });
.hint {
padding: 20px;
background: white;
width: 10px;
height: 10px;
border-radius: 50%;
}


.desc {
    display: none;
    width: 200px;
    background: white;
    z-index: 3;
    border: 1px solid #CCC;
    border-radius: 3px;
    top: 20px;
    left: -5px;
    padding: 12px;
    color: #666;
    font-size: 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hint"> ?</div>

<div class="desc">
This is supposed to appear on hover
This is supposed to appear on hover
This is supposed to appear on hover
This is supposed to appear on hover
<button type="button">
Click me
</button>
</div>

Upvotes: 1

Rik
Rik

Reputation: 3897

Make the .desc div a child of your .hint

$(document).ready(function() {
	
  var hint = $('.hint');
  var desc = $('.desc');
  
  hint.mouseenter(function() {
  	desc.show();
  });
  
   hint.mouseleave(function() {
  	desc.hide();
  });
});
.hint {
    padding: 20px;
    background: white;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    text-align: center;
    position: relative;
}

.desc {
    display: none;
    width: 200px;
    background: white;
    z-index: 3;
    border: 1px solid #CCC;
    border-radius: 3px;
    top: 20px;
    left: -5px;
    padding: 12px;
    color: #666;
    font-size: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="hint"> ?<div class="desc">
This is supposed to appear on hover
This is supposed to appear on hover
This is supposed to appear on hover
This is supposed to appear on hover
<button type="button">
Click me
</button>
</div></div>

See fiddle

Upvotes: 1

Ibrahim Khan
Ibrahim Khan

Reputation: 20750

Wrap your html with another div and add mouseenter and mouseleave event to this.

var con = $('.container');
var desc = $('.desc');

con.mouseenter(function() {
   desc.show();
});

con.mouseleave(function() {
   desc.hide();
});
.hint {
  padding: 20px;
  background: white;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.desc {
  display: none;
  width: 200px;
  background: white;
  z-index: 3;
  border: 1px solid #CCC;
  border-radius: 3px;
  top: 20px;
  left: -5px;
  padding: 12px;
  color: #666;
  font-size: 12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="hint"> ?</div>
  <div class="desc">
    This is supposed to appear on hover This is supposed to appear on hover This is supposed to appear on hover This is supposed to appear on hover
    <button type="button">
      Click me
    </button>
  </div>
</div>

Upvotes: 1

bloC
bloC

Reputation: 526

This Demo shows what I think you want to achieve. The trick is to also catch the event that is triggerd, when the mouse enters a other element.

$('*').not('.hint').not('.desc').not('.desc>button').mouseenter(function() {
   desc.hide();
});

Upvotes: 0

Mushr00m
Mushr00m

Reputation: 2356

You have 2 options

1 - You can add the show() and hide() when the tooltip is hover : Fiddle

2 - You can use only css to show or hide it. Not sure you need JS for simple things like that.

Upvotes: 0

Akshay Arora
Akshay Arora

Reputation: 1945

Just Place the .desc inside the .hint.

Fiddle

For the basic tooltip, you want:

<div title="This is my tooltip">

For fancier tooltips, See this

Upvotes: 1

Related Questions