Click copy

by thanhansoft

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Copy to Clipboard Example</title>
    <style>
        /* Tooltip container */
        .tooltip {
            position: relative;
            display: inline-block;
            cursor: pointer;
        }

        /* Tooltip text */
        .tooltip .tooltiptext {
            visibility: hidden;
            width: auto;
            font-size: 1rem;
            background-color: #555;
            color: #fff;
            text-align: center;
            border-radius: 5px;
            padding: 5px;
            position: absolute;
            z-index: 1;
            bottom: 150%; /* Position the tooltip above the text */
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
            transition: opacity 0.3s;
        }

        /* Tooltip arrow */
        .tooltip .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%; /* At the bottom of the tooltip */
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }

        /* Show the tooltip text when you mouse over the tooltip container */
        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>
<body><br><br>
    <div>
        <h1 data-copy="This is the text to be copied." data-text="Copy Text 1 Tooltip">
            Copy Text 1 asdasdasd
        </h1>
        <button data-copy="This is the text to be copied." data-text="Copy Text 1 Tooltip">
            Copy Text 1
        </button>
        <button data-copy="Another text to be copied." data-text="Copy Text 2 Tooltip">
            Copy Text 2
        </button>
        <button data-copy="Yet another text to be copied." data-text="Copy...