I am experiencing an issue where the tooltip does not appear when I click the icon. What adjustments can be made to the code to ensure that the tooltip

I have created a feature to copy abbreviation definitions when the clipboard icon is clicked. A tooltip displaying 'Copied' should appear after clicking the icon, but for some reason, it's not visible. Here's the code:

$(document).ready(function () {
  /* COPY TO CLIPBOARD */

  // click the icon
  $(".copy-icon").on("click", function (e) {
    e.preventDefault();

    // Find the parent list item
    let listItem = $(this).closest("li");

    // Find the abbreviation and definition within the list item
    let abbreviation = listItem.find("p").text();

    // Create a temporary input element
    let $temp = $("<input>");
    $("body").append($temp);
    $temp.val(abbreviation).select();
    document.execCommand("copy");
    $temp.remove();

    // Show the tooltip
    let tooltip = $("<span class='tooltip'>Copied</span>");
    listItem.append(tooltip);

    // Remove the tooltip after 1 second
    setTimeout(function () {
      tooltip.remove();
    }, 1000);
  });
});
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  overflow-y: scroll;
}

body {
  font-family: "Poppins", sans-serif;
  background-color: #f0f0f0; /* Background color for the body */
}

/* Centering content */
.center {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Container for the abbreviations list */
.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two columns for two rows */
  gap: 20px; /* Adjust the gap as needed */
  justify-content: center; /* Center the columns horizontally */
  font-family: "Poppins", sans-serif;
  padding: 0 20px; /* Add padding to the sides */
}

/* Abbreviations list row */
.abbreviations-row {
  list-style: none;
  padding: 0;
}

/* Abbreviation list item */
.abbreviations-list li {
  display: flex;
  align-items: center;
  background-color: #fff; /* Background color for list items */
  border: 1px solid #ccc; /* Border for list items */
  border-radius: 8px; /* Rounded corners for list items */
  margin: 10px;
  padding: 10px;
  position: relative;
}

/* Copy icon */
.copy-icon {
  color: #2a7475;
  font-size: 24px;
  margin-right: 10px; /* Spacing between icon and text */
  cursor: pointer;
}

.copy-icon:hover {
  transform: translateY(-4px);
  opacity: 1;
}

.abbreviations-list li {
  position: relative; /* Add this line to set a non-static position */
  /* ... Other styles ... */
}

.tooltip {
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  background: #373737;
  padding: 10px 15px;
  color: #fff;
  font-size: 14px;
  border-radius: 4px;
  letter-spacing: 1px;
  opacity: 0;
  z-index: 1; /* Ensure tooltip appears above other elements */
  transition: opacity 0.3s ease-in-out;
}

.tooltip.appear {
  animation: appear 1s ease;
}

@keyframes appear {
  0% {
    opacity: 0;
  }
  20% {
    transform: translateY(10px);
    opacity: 1;
  }
  80% {
    transform: translateY(0px);
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Abbreviations List</title>
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Poppins&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="header">
      <h3>Abbreviations List</h3>
    </div>
    <div class="center">
      <div class="container">
        <div class="abbreviations-row">
          <ul class="abbreviations-list">
            <li>
              <span class="tooltip">Copied</span>
              <i class="material-icons copy-icon">content_copy</i>
              <p>ACR, American College of Rheumatology criteria</p>
            </li>
            <li>
              <span class="tooltip">Copied</span>
              <i class="material-icons copy-icon">content_copy</i>
              <p>AE, adverse event</p>
            </li>
            <li>
              <span class="tooltip">Copied</span>
              <i class="material-icons copy-icon">content_copy</i>
              <p>AS, ankylosing spondylitis</p>
            </li>
            <!-- Add more abbreviations as needed -->
          </ul>
        </div>
        <div class="abbreviations-row">
          <ul class="abbreviations-list">
            <li>
              <span class="tooltip">Copied</span>
              <i class="material-icons copy-icon">content_copy</i>
              <p>
                ACR 20/50/70, ≥20/≥50/≥70% response in the American College of
                Rheumatology criteria
              </p>
            </li>
            <li>
              <span class="tooltip">Copied</span>
              <i class="material-icons copy-icon">content_copy</i>
              <p>API, abbreviated prescribing information</p>
            </li>
            <li>
              <span class="tooltip">Copied</span>
              <i class="material-icons copy-icon">content_copy</i>
              <p>ASAS, Assessment of SpondyloArthritis international Society</p>
            </li>
            <!-- Add more abbreviations as needed -->
          </ul>
        </div>
      </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </body>
</html>

I've consulted chatgpt regarding the issue, and according to it, there seems to be nothing wrong with the code, and the tooltip should be visible.

javascripthtmlcsstooltip

Answer №1

In the tooltip class, you set the opacity to 0 and then override it by adding the appear class. However, when appending your dynamic tooltip, you forget to add the appear class.

Instead of fixing this issue, I decided to simplify the solution by reusing the existing tooltip span in your HTML code. There was no need to recreate it from scratch. Using jQuery, I located the child element of the listitem with the class "tooltip" and added the appear class to show it. I also removed the timeout since the transition properties handle the visibility change smoothly after a second.

$(document).ready(function () {
  /* COPY TO CLIPBOARD */

  // click the icon
  $(".copy-icon").on("click", function (e) {
    e.preventDefault();

    // Find the parent list item
    let listItem = $(this).closest("li");

    // Find the abbreviation and definition within the list item
    let abbreviation = listItem.find("p").text();

    // Create a temporary input element
    let $temp = $("<input>");
    $("body").append($temp);
    $temp.val(abbreviation).select();
    document.execCommand("copy");
    $temp.remove();

    // Show the tooltip
    listItem.find(".tooltip").addClass("appear")
  });
});
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  overflow-y: scroll;
}

body {
  font-family: "Poppins", sans-serif;
  background-color: #f0f0f0; /* Background color for the body */
}

/* Centering content */
.center {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Container for the abbreviations list */
.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two columns for two rows */
  gap: 20px; /* Adjust the gap as needed */
  justify-content: center; /* Center the columns horizontally */
  font-family: "Poppins", sans-serif;
  padding: 0 20px; /* Add padding to the sides */
}

/* Abbreviations list row */
.abbreviations-row {
  list-style: none;
  padding: 0;
}

/* Abbreviation list item */
.abbreviations-list li {
  display: flex;
  align-items: center;
  background-color: #fff; /* Background color for list items */
  border: 1px solid #ccc; /* Border for list items */
  border-radius: 8px; /* Rounded corners for list items */
  margin: 10px;
  padding: 10px;
  position: relative;
}

/* Copy icon */
.copy-icon {
  color: #2a7475;
  font-size: 24px;
  margin-right: 10px; /* Spacing between icon and text */
  cursor: pointer;
}

.copy-icon:hover {
  transform: translateY(-4px);
  opacity: 1;
}

.abbreviations-list li {
  position: relative; /* Add this line to set a non-static position */
  /* ... Other styles ... */
}

.tooltip {
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  background: #373737;
  padding: 10px 15px;
  color: #fff;
  font-size: 14px;
  border-radius: 4px;
  letter-spacing: 1px;
  opacity: 0;
  z-index: 1; /* Ensure tooltip appears above other elements */
  transition: opacity 0.3s ease-in-out;
}

.tooltip.appear {
  animation: appear 1s ease;
}

@keyframes appear {
  0% {
    opacity: 0;
  }
  20% {
    transform: translateY(10px);
    opacity: 1;
  }
  80% {
    transform: translateY(0px);
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Abbreviations List</title>
    <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Poppins&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="header">
      <h3>Abbreviations List</h3>
    </div>
    <div class="center">
      <div class="container">
        <div class="abbreviations-row">
          <ul class="abbreviations-list">
            <li>
              <span class="tooltip">Copied</span>
              <i class="material-icons copy-icon">content_copy</i>
              <p>ACR, American College of Rheumatology criteria</p>
            </li>
            <li>
              <span class="tooltip">Copied</span>
              <i class="material-icons copy-icon">content_copy</i>
              <p>AE, adverse event</p>
            </li>
            <li>
              <span class="tooltip">Copied</span>
              <i class="material-icons copy-icon">content_copy</i>
              <p>AS, ankylosing spondylitis</p>
            </li>
            <!-- Add more abbreviations as needed -->
          </ul>
        </div>
        <div class="abbreviations-row">
          <ul class="abbreviations-list">
            <li>
              <span class="tooltip">Copied</span>
              <i class="material-icons copy-icon">content_copy</i>
              <p>
                ACR 20/50/70, ≥20/≥50/≥70% response in the American College of
                Rheumatology criteria
              </p>
            </li>
            <li>
              <span class="tooltip">Copied</span>
              <i class="material-icons copy-icon">content_copy</i>
              <p>API, abbreviated prescribing information</p>
            </li>
            <li>
              <span class="tooltip">Copied</span>
              <i class="material-icons copy-icon">content_copy</i>
              <p>ASAS, Assessment of SpondyloArthritis international Society</p>
            </li>
            <!-- Add more abbreviations as needed -->
          </ul>
        </div>
      </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Refresh Entity with Real-Time Data on Cesium

I have been attempting to showcase an entity moving within Cesium through the use of live/dynamic data. After trying various techniques and consulting past forums, particularly those from 2015-2016, I am still struggling to make it work. Despite my effort ...

javascriptcesiumjs

tips for aligning bootstrap flex items horizontally in multiple div containers

Is there a more efficient method to align flex items in different div flex containers so that the flex items have the same width, as shown below? <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" ...

cssbootstrap-4flexbox

Error! React is unable to find the window object

I recently added the "react-speech" package to my application in order to incorporate text-to-speech functionality. However, upon importing the package, I encountered an error that has been challenging to resolve despite extensive research. Any assistance ...

javascriptnode.jsreactjswebnpm

Add an event listener to a dynamically created div block through jQuery when it is clicked

When the page loads, a dynamic div appears that is visible to the user and in Firebug, but is not available in the page source. The content within this div changes dynamically. I am attempting to bind a click event to this div so that when a user clicks o ...

javascriptjqueryhtml

Call getElementById upon the successful completion of an AJAX request

In the process of constructing a mini quiz, I am utilizing a variable quizScore to store the score. Each question in the quiz is displayed using AJAX. An individual AJAX call captures the ID of the button pressed (for example, on question 2, the button ID ...

javascriptajax

Calculating the duration of time using JQuery with provided start and end times

I am currently utilizing a jQuery time picker to gather start and end times in a 12hr format. My goal is to calculate the time duration between the start and end times in HH:MM:SS format. The code snippet I have below is providing me with a duration like ...

phpjavascriptjquery

The JSON node fails to return a value after inserting data through an ajax request

I'm encountering an issue with a jQuery plugin that loads JSON data through an AJAX call and inserts it into an existing object. When I attempt to reference the newly inserted nodes, they show up as 'undefined', despite the data appearing co ...

javascriptjqueryajaxjson

Is there a way to automatically compile LESS files whenever I save a document?

After installing Less using npm with the command $ npm install -g less I currently compile my source files to .css by running $ lessc styles.less styles.css Is there a method through the command line to automatically compile the document when saving it ...

cssnode.jsnpmless

Basic image slider featuring adjustable heights

I'm currently working on a basic content slider, but I've encountered an issue where the container doesn't expand as new content slides in. It seems to be related to the absolute positioning of the content items. If I don't use absolute ...

jqueryjquery-uicss

The functionality of res.send is not working correctly

Attempting to send a response from my express application to the front-end in order to display an alert. Here is what I have attempted in my app: if (info.messageId) { res.redirect('back'); res.send({ success: true }); } ...

javascriptnode.jsexpress

Optimal strategies for initializing Knockout JS models from backend code

Upon taking over a website that utilizes knockout js and asp.net, I noticed some performance issues during the initial page load. After investigating, I found that there are approximately 20 models on the site, each making an ajax call to retrieve data fro ...

javascriptjqueryasp.netajaxknockout.js

AngularJS supports asynchronous validation on blur

Using Angular JS version 1.5.6, I am looking to implement asynchronous input validation that occurs only on blur. However, I am unable to use modelOption: {debounce: 500} or modelOption: {updateOn: 'blur'} due to the directive being used with oth ...

javascriptangularjs

"Having issues with Django not properly applying the JavaScript and CSS files I've linked in

I have completed my project and organized all the necessary files, including index.html, css, js, and settings.py within the appropriate folders. I am encountering an issue with applying a pen from the following source: CodePen index.html <!DOCTYPE h ...

javascriptpythonhtmlcssdjango

Unraveling the mysteries of the Bootstrap carousel script

Hi everyone, I'm a newcomer to the world of JS and jQuery. Recently, while examining the code in carousel.js, I stumbled upon this particular line: this.cycle(true) The cycle function is structured like this: Carousel.prototype.cycle = function ...

javascriptjquerytwitter-bootstrapcarousel

Enhancing ReactJS functionality by incorporating custom logic prior to resolving promises

In one of my components, there is a function as follows: this.props.firebase.getDropSites("123456").then(data => { console.log(data); }); This function in turn calls the following method from my utilities class: getDropSites(dropSiteId) { return th ...

javascriptreactjs

End your Idp session and log out using passport-saml

Encountering a 400 bad request error when attempting to log out a user from the idp session. Despite successfully logging out the user from the application/passport session, they remain logged in to the idp session. The logout and callback endpoints are c ...

javascriptnode.jsexpresspassport.jspassport-saml

Attempting to access an HTTP Node server from within an HTTPS environment resulted in an SSL error

I am faced with the challenge of connecting to a socket.io from a React client within a Node server. Both the React client and the location of the Node server (a microservice housed in a separate Docker container alongside a Java container) are operating o ...

javascriptnode.jsdockersslhttps

Enhancing user experience by implementing dynamic text box functionality that triggers ajax load for dropdown options using a combination

Here is the task I need help with, along with the code snippet: I want to enable the author select box when both the start and end dates are filled out. The author names should be fetched dynamically from the database based on the selected start and end ...

phpjqueryhtmlajaxjquery-ui

Unlock the power of React Testing Library with the elusive waitFor function

I came across an interesting tutorial about testing React applications. The tutorial showcases a simple component designed to demonstrate testing asynchronous actions: import React from 'react' const TestAsync = () => { const [counter, setC ...

javascriptreactjsjestjsreact-testing-library

CSS - Struggling to identify the source of unwanted horizontal scrolling?

Recently, I've been attempting to make adjustments to a responsive website that utilizes media queries. Despite my efforts, whenever the site is viewed on a mobile-sized screen, it consistently requires horizontal scrolling regardless of the screen&a ...

csshtmlscale