[SOLVED] jQuery, qTip2 - Retrieve element below another element

jQuery, qTip2 - Retrieve element below another element

I need to get a div element (.tooltip_remove_content) below a particular span(.remove-from-wishlist) in the DOM,

    <div class="product-item"> <!-- This is an array --> 

        <div style="text-align:center;">
            <span class="remove-from-wishlist">Remove</span>    <!-- I attach qtip2 plugin for displaying a tooltip -->
        </div>

        <div class="tooltip_remove_content display-none">    <!-- tooltip content -->
            <div class="tooltip-text">
                <a href="#" id="A123" class="remove-from-wishlist save-wishlist-text">
                Remove from Wishlist</a>
            </div>
        </div>

    </div> 



    $(".remove-from-wishlist").qtip({
        content:{
            text:$(this).next(".tooltip_remove_content").html()  // I need to get the div with class tooltip_remove_content below 
                                                                // span with class remove-from-wishlist
        },
        hide:'unfocus',
        style: "qtooltip",
        position: {
            my: "bottom center",
            at: "top center",
            target: $(".remove-from-wishlist")
        }
    })

Solution

You can use .closest() and find() method to get required div and then use .html() to return html content from that div and show same inside your plugin.

Demo Code :

$(".remove-from-wishlist").qtip({
  content: {
    text: function() {
      //use closest & find
      return $(this).closest(".product-item").find(".tooltip_remove_content").html()
    }
  },
  hide: 'unfocus',
  style: "qtooltip",
  position: {
    my: "bottom center",
    at: "top center",
  }
})

.display-none {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.css" integrity="sha512-ZsHJliDVkFVbmwvOjSlsp9NhO+8Lu+qDAg0JVuXGQmh9RBgf8z1IT6tytgYVl8b6hAHUNkuhbqLFuXOkZ0VNvw==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/jquery.qtip.min.js" integrity="sha512-BxJRFdTKV85fhFUw+olPr0B+UEzk8FTLxRB7dAdhoQ7SXmwMECj1I4BlSmZfeoSfy0OVA8xFLTDyObu3Nv1FoQ==" crossorigin="anonymous"></script>
<div class="product-item">
  <!-- This is an array -->

  <div style="text-align:center;margin-top:75px;">
    <span class="remove-from-wishlist">Remove</span>
    <!-- I attach qtip2 plugin for displaying a tooltip -->
  </div>

  <div class="tooltip_remove_content display-none">
    <!-- tooltip content -->
    <div class="tooltip-text">
      <a href="#" id="A123" class="remove-from-wishlist save-wishlist-text"> Remove from Wishlist</a>
    </div>
  </div>

</div>
<div class="product-item">
  <!-- This is an array -->

  <div style="text-align:center;margin-top:75px;">
    <span class="remove-from-wishlist">Remove</span>
    <!-- I attach qtip2 plugin for displaying a tooltip -->
  </div>

  <div class="tooltip_remove_content display-none">
    <!-- tooltip content -->
    <div class="tooltip-text">
      <a href="#" id="A123" class="remove-from-wishlist save-wishlist-text"> Remove from Wishlist1</a>
    </div>
  </div>

</div>