Jquery mousenter and mouseleave should trigger only "active" .class

Question

My issue is probably simple. I currently have multiple buttons with the same class. When you hover the button, I want a div (.blockButtonTips) to appear containing specific info related to the button.

My issue right now is that, when I hover one button, then the div appears successfully, however it appears for all of my buttons whereas I only want it to appear for the button being hovered.

I could add a unique identifier for each .blockButtonTips , but wondering if im actually able to target it without?

CODE

        //MOUSEOVER
        $(".blockButton").mouseenter(function() {
            //Passing on .class div to a function
            circleTextShow(".blockButtonTips");
        })
        //MOUSEOUT
        $(".blockButton").mouseleave(function() {
            timer= setTimeout(function() {
                //Passing on .class div to dis-appear to a function
                circleTextHide(".blockButtonTips");
            }, delay);
        });

    //Toggle div animation
    function circleTextShow(elementId) {
//make div appear animation code
    }

    function circleTextHide(elementId) {
//make div dis-appear code
    }

HTML

<div class="blockButton">
    <div class="blockButtonTips">Text 1</div
</div>
<div class="blockButton">
    <div class="blockButtonTips">Text 2</div
</div>
<div class="blockButton">
    <div class="blockButtonTips">Text 3</div
</div>

Answer 1

Pass a reference to the div contained within the button to the circleTextShow / Hide functions.

//MOUSEOVER
        $(".blockButton").mouseenter(function() {
            //Passing on .class div to a function
            circleTextShow($(this).find('.blockButtonTips'));
        })
        //MOUSEOUT
        $(".blockButton").mouseleave(function() {
            var blockbutton = this;
            timer= setTimeout(function() {
                //Passing on .class div to dis-appear to a function
                circleTextHide($(blockbutton).find('.blockButtonTips'));
            }, delay);
        });

Then within the functions, you can reference the tips as so:

  //Toggle div animation
  function circleTextShow(element) {
     //make div appear animation code
     $(element).show();
  }

  function circleTextHide(element) {
     //make div dis-appear code     
     $(element).hide();
  }