jQuery, qTip2 - Retrieve element below another element

Question

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")
        }
    })

Answer 1

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>

Answer 2

You can use parent().next() as follow:

elem = $('span.remove-from-wishlist').parent().next();
console.log($(elem).html()); // if you want to see the innerHTML of this element.

$(".remove-from-wishlist").qtip({
        content:{
            text: function () { return $(elem).html() }
        },
        hide:'unfocus',
        style: "qtooltip",
        position: {
            my: "bottom center",
            at: "top center"
        }
    })