💡 Create a "Copy Link to Clipboard" feature

[dandange8005]

Create an UI function so that when users hover their mouse over the section title, a link to the title would appear and says "copy link to clipboard".

Steps:

Certainly! You can achieve this with jQuery by following a simpler approach. Below is a step-by-step guide on how to create a "Copy Link to Clipboard" feature that appears when a user hovers over a section title:

1. HTML Structure: Assume each section title in your HTML is structured like this, with a unique id for each section:

   <h2 class="section-title" data-link="#section1">Section Title 1</h2>

2. CSS Styling: Style the "Copy Link to Clipboard" button to only show on hover. You might not directly see this in jQuery, but it's essential for the hover effect:

   .copy-link {
    display: none;
    cursor: pointer;
   }
   .section-title:hover .copy-link {
    display: inline;
   }

3. jQuery Script: Use jQuery to append a "Copy Link to Clipboard" button when the page loads, and handle the click event to copy the link to the clipboard.

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script>
    $(document).ready(function() {
      $('.section-title').each(function() {
        var link = $(this).data('link');
        $(this).append(`<span class='copy-link'>Copy Link to Clipboard</span>`);
   
        $(this).hover(function() {
          // Hover in
          $('.copy-link', this).show();
        }, function() {
          // Hover out
          $('.copy-link', this).hide();
        });
   
        $('.copy-link', this).click(function() {
          navigator.clipboard.writeText(window.location.href + link);
          alert('Link copied to clipboard!');
        });
      });
    });
   </script>

This script dynamically appends a "Copy Link to Clipboard" span to each section title and uses jQuery to manage hover states and click events. When a user clicks on the "Copy Link to Clipboard" text, the browser's clipboard is updated with the section link.

Remember to adjust the data-link attribute for each section title to match the actual ID or link you want to copy to the clipboard.