@yhwh-script/create-app/sqlite-examples/public/elements/quick/quick-delete.html

A yhwh-script web app can become anything you want it to become. Set it up with just one command.

<script>
    shadowDocument.querySelector("div.tooltip").addEventListener("click", () => {
        const deletionEvent = new CustomEvent('deleteAnimal', { bubbles: true, composed: true, detail: state });
        shadowDocument.dispatchEvent(deletionEvent);
    })
</script>

<style>
    .tooltip {
        position: relative;

        &:hover {
            .tooltiptext {
                visibility: visible;
                opacity: 1;
            }
        }

        .tooltiptext {
            visibility: hidden;
            width: 80px;
            background-color: #555;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -40px;
            opacity: 0;
            transition: opacity 0.3s;

            &:after {
                content: "";
                position: absolute;
                top: 100%;
                left: 50%;
                margin-left: -5px;
                border-width: 5px;
                border-style: solid;
                border-color: #555 transparent transparent transparent;
            }
        }
    }
</style>

<template>
    <div class="tooltip">🗑️<span class="tooltiptext">Delete</span></div>
</template>