Click to Copy with Toast and No Alert Pop Up (thanks chatGPT and Sam Altman)

Click to Copy with a Toast Message (No Alert)

Here’s how you can display code like the one below:

hiSetBindKey("Schematics" "F5" "hiDeiconifyWindow(window(1)) && hiRaiseWindow(window(1))")

...and allow users to:

• Click the code to copy it to clipboard
• See a small toast saying Copied! next to the label
• All without triggering an alert box

🔧 Full HTML + CSS + JS (Paste in a blog post)

This version is safe even with quotes and parentheses — it programmatically sets the text to avoid HTML escaping issues.

<style>
  .copy-container {
    position: relative;
    margin: 1.5em 0;
  }

  .copy-label {
    font-weight: bold;
    margin-bottom: 0.4em;
  }

  .copy-text {
    display: inline-block;
    padding: 0.5em 0.8em;
    border: 1px solid #ccc;
    background: #f4f4f4;
    font-family: monospace;
    white-space: pre-wrap;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
  }

  .copy-text:hover {
    background: #e9e9e9;
  }

  .toast {
    position: absolute;
    left: 160px;
    top: 0;
    padding: 0.3em 0.6em;
    background-color: #323232;
    color: white;
    border-radius: 4px;
    font-size: 0.9em;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .toast.show {
    opacity: 1;
  }
</style>

<div class="copy-container">
  <div class="copy-label">Click to copy</div>
  <div class="copy-text" id="bindkeyText"></div>
  <div class="toast">Copied!</div>
</div>

<script>
  (function () {
    const codeToCopy = 'hiSetBindKey("Schematics" "F5" "hiDeiconifyWindow(window(1)) && hiRaiseWindow(window(1))")';
    const textDiv = document.getElementById('bindkeyText');
    textDiv.textContent = codeToCopy;

    textDiv.onclick = function () {
      navigator.clipboard.writeText(codeToCopy).then(() => {
        const toast = this.nextElementSibling;
        toast.classList.add('show');
        setTimeout(() => toast.classList.remove('show'), 3000);
      });
    };
  })();
</script>

✅ Features

• Fully self-contained (HTML, CSS, JS)
• No alert dialogs
• Safe for characters like quotes, parentheses, ampersands
• Easy to style or replicate for other code blocks

🧪 Example Output

This is what it will look like in your blog:

Click to copy

Copied!

✅ You're all set! Paste the above into your blog post's HTML editor, and your readers will get a clean, interactive way to copy code — with no popup surprises.