show woocommerce messages in overlay div or tooltip without page refresh - php

Question

I am trying to get rid of the redirect/reload when the user is adding a product or gets a info message in my woocommerce shop. I just want to show the "added to cart" message in a tooltip or overlay div and let them continue shopping without renavigate to the shop.
AJAX add to cart is enabled
so my question is:
what can I do to display this messages without refreshing the whole page?
EDIT: maybe useful for anyone, heres my FINAL CODE:
$('.add_to_cart_button, .single_add_to_cart_button').click(function(e) {
var produkt_id;
if ($(this).attr('data-product_id') == undefined) {
produkt_id = $('input[type=hidden]').val();
} else {
produkt_id = $(this).attr('data-product_id');
}
var amount;
if ($(this).hasClass('single_add_to_cart_button') == true) {
if ($('.qty').val() !== '1') {
amount = $('.qty').val();
}
console.log(amount + ' single_add_to_cart_button');
}
else {
amount = '1';
console.log(amount + ' add_to_cart_button');
}
function addToCart(produkt_id) {
$.ajax({
type: 'POST',
url: '?add-to-cart=' + produkt_id,
data: {'product_id': produkt_id,
'quantity': amount},
success: function(response, textStatus, jqXHR) {
// callback
}/*,
dataType: 'JSON'*/
});
}
e.preventDefault();
addToCart(produkt_id);
});

Answer 1

Do you mean something like this:
if you do the function "addedToChart" it will do a ajax and creat a message at top of the page
$(document).on('click','.add_to_cart_button',function(e) {
e.preventDefault();
addedToCart($(this).data('product_id'));
});
function addedToCart(id){
$.ajax({
type: "POST",
url: "some.php",
data: { product_id: id},
success: function(){
$('body').prepend('<div style="position:fixed; height:20px; width:100%; background-color:red; text-align:center;">Added to chart</div>');
}
});
}