Copy to clipboard

Definition

The Copy Tooltip Component is a React-based UI element designed to provide users with an intuitive way to copy text values, such as suggestions or entries, to the clipboard with visual feedback.

Description

This component integrates with text input fields, displaying recommended text entries and offering an interactive copy button. When clicked, the button copies the associated text to the user's clipboard and briefly shows a tooltip confirming the action.

Behavior

The tooltip automatically adjusts its placement based on the viewport size to ensure visibility.
Visual feedback ("Copied to clipboard") is provided immediately after the copy action, disappearing after a short duration.

Accessibility

Ensure that the tooltip is open long enough so that users have plenty of time to read the message.

Example

Text to copy:


      <label for="copyTextInput" class="form-label">Text to copy:</label>
      <input
        type="text"
        class="form-control"
        id="copyTextInput"
        value="This is the text to copy"
        aria-label="Text input with copy button"
      />
      <br />
      <button
        class="btn btn-outline-secondary"
        type="button"
        id="copyButton"
        data-bs-toggle="tooltip"
        data-bs-placement="bottom"
        title="Copy to clipboard"
        >
          <FontAwesomeIcon icon={faCopy} client:only />Copy text to clipboard
        </button>