Bookmark Tooltip Remove Icon

Pada bagian function updateModalContent() dengan script lengkapnya sebagai berikut :

Perubahan function Script

Script Before

function updateModalContent(){let favorites=JSON.parse(localStorage.getItem('lmydfavorites'))||[];let modalFavoriteList=$('#modal-favorite-list');let modalTable=$('#modal-table');let modalFooterButtons=$("#btn-fav");modalFooterButtons.html('');modalFavoriteList.html('');let limitedFavorites=favorites.slice(0,5);if(favorites.length===0){modalFavoriteList.html('<tr><td colspan="4" class="text-center">No Posts bookmarked</td></tr>');let backToHomeButton=$('<button>').text("View All Posts").addClass("btn btn-outline-light rounded-1").click(function(){window.location.href="/search?max-results=4";});modalFooterButtons.append(backToHomeButton);}else{if(window.location.pathname==="/p/bookmarks-post.html"){modalTable.hide();let bookmarkMessage=$('<p>').text("you are currently on the bookmarks page").addClass("text-center fw-bold mt-3");modalFavoriteList.append(bookmarkMessage);}else{limitedFavorites.forEach((item,index)=>{let row=$('<tr>');row.append($('<td>').addClass("text-center align-middle").text(index+1));let imgCell=$('<td>').addClass("text-center align-middle");let imageLink=$('<a>').attr({href:item.link,target:"_blank"});let imgElement=$('<img>').addClass("img-fluid rounded-1").css({height:"50px",width:"80px"}).attr({src:item.img,alt:item.judul});imageLink.append(imgElement);imgCell.append(imageLink);row.append(imgCell);row.append($('<td>').addClass("align-middle").append($('<a>').attr('href',item.link).text(item.judul)));let actionCell=$('<td>').addClass('text-center align-middle');let removeBtn=$('<button>').addClass("sampahFav btn btn-link border-0 py-2 putih").html('<svg class="bmkIcon-zis"><use href="#bmksampah"></use></svg>').attr('data-id',item.id);actionCell.append(removeBtn);row.append(actionCell);modalFavoriteList.append(row);});let remainingCount=favorites.length-limitedFavorites.length;if(favorites.length>5){modalFooterButtons.html('<a class="btn btn-link" onclick="window.location.href=\'/p/bookmarks-post.html\'">View All Bookmarked Posts (+'+remainingCount+')</a>');}}}}
$("#favorite-icon").on('click',function(){let favorites=$("#favoritesModal");updateModalContent();let modal=new bootstrap.Modal(favorites[0]);modal.show();});
$("#modal-favorite-list").on('click',function(event){if ($(event.target).closest('.sampahFav').length > 0){let id=$(event.target).closest('.sampahFav').attr('data-id');removeFavorite(id);updateFavoriteCountAndIcon();broadcastStorageChange();}});

Script After

function updateModalContent(){let favorites=JSON.parse(localStorage.getItem('lmydfavorites'))||[];let modalFavoriteList=$('#modal-favorite-list');let modalTable=$('#modal-table');let modalFooterButtons=$("#btn-fav");modalFooterButtons.html('');modalFavoriteList.html('');let limitedFavorites=favorites.slice(0,5);if(favorites.length===0){modalFavoriteList.html('<tr><td colspan="4" class="text-center">No Posts bookmarked</td></tr>');let backToHomeButton=$('<button>').text("View All Posts").addClass("btn btn-outline-light rounded-1").click(function(){window.location.href="/search?max-results=4";});modalFooterButtons.append(backToHomeButton);}else{if(window.location.pathname==="/p/bookmarks-post.html"){modalTable.hide();let bookmarkMessage=$('<p>').text("you are currently on the bookmarks page").addClass("text-center fw-bold mt-3");modalFavoriteList.append(bookmarkMessage);}else{limitedFavorites.forEach((item,index)=>{let row=$('<tr>');row.append($('<td>').addClass("text-center align-middle").text(index+1));let imgCell=$('<td>').addClass("text-center align-middle");let imageLink=$('<a>').attr({href:item.link,target:"_blank"});let imgElement=$('<img>').addClass("img-fluid rounded-1").css({height:"50px",width:"80px"}).attr({src:item.img,alt:item.judul});imageLink.append(imgElement);imgCell.append(imageLink);row.append(imgCell);row.append($('<td>').addClass("align-middle").append($('<a>').attr('href',item.link).text(item.judul)));let actionCell=$('<td>').addClass('text-center align-middle');let removeBtn=$('<button>').addClass("sampahFav btn btn-link border-0 py-2 putih").html('<svg class="bmkIcon-zis"><use href="#bmksampah"></use></svg>').attr('data-id',item.id).attr('title', 'remove bookmark');actionCell.append(removeBtn);row.append(actionCell);modalFavoriteList.append(row);removeBtn.tooltip();});let remainingCount=favorites.length-limitedFavorites.length;if(favorites.length>5){modalFooterButtons.html('<a class="btn btn-link" onclick="window.location.href=\'/p/bookmarks-post.html\'">View All Bookmarked Posts (+'+remainingCount+')</a>');}}}}
$("#favorite-icon").on('click',function(){let favorites=$("#favoritesModal");updateModalContent();let modal=new bootstrap.Modal(favorites[0]);modal.show();});
$("#modal-favorite-list").on('click',function(event){let button = $(event.target).closest('.sampahFav');if (button.length > 0) {let id = button.attr('data-id');button.tooltip('hide').trigger('mouseleave');removeFavorite(id);updateFavoriteCountAndIcon();broadcastStorageChange();}});

ada beberapa perubahan yang dilakukan untuk menambahkan tooltip pada remove icon SVG #bmksampah dengan class .sampahFav

Perubahan:

Berikut adalah beberapa berubahan yang dilakukan:

Penambahan tooltip pada icon remove

.attr('title', 'remove bookmark');

Inisialisasi tooltip pada icon remove

removeBtn.tooltip();

Penambahan CSS supaya tooltip ada didepan modal

.tooltip{z-index:12000;}

Perubahan pada Event Click Function

Penambahan Variabel button: Saya menambahkan variabel button yang didefinisikan sebagai elemen tombol dengan kelas .sampahFav yang paling dekat dengan elemen yang diklik (event.target).

let button = $(event.target).closest('.sampahFav');

button.tooltip('hide').trigger('mouseleave');

Sebelum dirubah

$("#modal-favorite-list").on('click',function(event){
    if ($(event.target).closest('.sampahFav').length > 0){
        let id=$(event.target).closest('.sampahFav').attr('data-id');
        button.tooltip('hide').trigger('mouseleave');
        removeFavorite(id);
        updateFavoriteCountAndIcon();
        broadcastStorageChange();
    }
});

Setelah dirubah

$("#modal-favorite-list").on('click', function(event) {
    let button = $(event.target).closest('.sampahFav');
    if (button.length > 0) {
        let id = button.attr('data-id');
        
        // Menghilangkan tooltip saat tombol diklik
        button.tooltip('hide').trigger('mouseleave');
        
        // Lakukan tindakan penghapusan favorit
        removeFavorite(id);
        updateFavoriteCountAndIcon();
        broadcastStorageChange();
    }
});