CODEWITHSUNDEEP
jqueryqtip2
SyAu
SyAu

Reputation: 1681

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

Upvotes: 1

Views: 111

Answers (2)

Mara Clementine
Mara Clementine

Reputation: 61

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

Upvotes: 1

Swati
Swati

Reputation: 28522

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>

Upvotes: 1

Related Questions