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

Incorporating Vuetify into a Vue CLI application with the help of webpack

I am facing an issue with my Vue CLI application that uses Webpack and Vuetify. The Vuetify components are not loading properly, and I keep getting the following warnings: Unknown custom element: < v-app > - did you register the component correctly? ...

javascriptvue.jsvuejs2vue-componentvuetify.js

Ways to conceal a text-filled div behind an image using 3D transformation

I've been working on creating three images with a fun 'flipcard' effect for the past day and a half, and I believe I'm getting closer to achieving my goal. However, there is one issue remaining, as you can see in the codepen. When the ...

htmlcsscss-transitions

What is preventing me from accessing the variable?

Having some trouble using a variable from JSON in another function. Can someone lend a hand? async function fetchData() { let response = await fetch('https://run.mocky.io/v3/b9f7261a-3444-4bb7-9706-84b1b521107d'); let data = await response.js ...

javascriptjson

Is there a way to customize CKEditor to prevent it from continuously adding <p></p> tags within the textarea automatically?

As I was going through the CKEditor tutorial, I implemented the following: $( '#editor' ).ckeditor(function(){}); //it's working great!! However, after submitting the form, I noticed that by default, the textarea displays <p></p ...

javascripthtmlcssckeditor

Updating parameters in Node.js with mongoose

script.js var mongoose = require('mongoose'); var Schema = mongoose.Schema; var scriptSchema = new Schema({ status: {type: String, default: 'INCOMPLETE'}, code: String, createdDate: {type: Date, default: Date.now}, user: {t ...

javascriptnode.jsmongodb

Showing how to make an element visible in Selenium and Python for file uploading

Check out this HTML snippet: <div class="ia-ControlledFilePicker"><input class="ia-ControlledFilePicker-control icl-u-visuallyHidden" type="file" id="ia-FilePicker"><label class="ia-ControlledFilePicker-fakeControl" for="ia-FilePicker">C ...

javascriptpythonpython-3.xseleniumselenium-chromedriver

The VueJS app seems to be experiencing difficulties with rendering the content

Just starting out with VueJS and I have my initial files - index.html and index.js. I want to stick with just these two files and not add any more. Here's the content of index.html: <html lang="en"> <head> <meta charset ...

javascriptvue.jsvuejs3

Exploring the world of two-dimensional arrays in D3 programming

I am interested in visualizing data obtained from the census data API, specifically from the ACS survey. The data is not in a typical JSON format, but rather as a two-dimensional array. It appears like this: [ [ “POPULATION”, “DATE”, ...

javascriptarraysjsond3.js

Achieving Left and Right Alignment of Navigation Elements using Flex Basis in Chakra UI with Next JS

For my project, I am working on creating a straightforward Navigation bar using Chakra UI and Next JS. The goal is to have an svg logo positioned at the top-left, while the menu and UI buttons are aligned to the top-right. However, I'm facing challeng ...

cssreactjsnext.jsflexboxchakra-ui

When I try to execute a mutation with Apollo and React, I encounter a 400 error. It could be due to a

Every time I try to perform a mutation, I keep getting a 400 error code for some strange reason. Here is my httpLink code snippet: // ApolloProvider.js const httpLink = createHttpLink({ uri: 'http://localhost:3000/graphql', }); const client ...

javascriptreactjsexpressgraphql

Using the MoveToElement and click functions in Protractor with Node.js for automated browser

Trying to click on a checkbox in our application. I have successfully implemented it in Selenium Java using the code below, but struggling to do the same in Protractor Node.js. Any assistance would be appreciated. Selenium- Java : Actions actions ...

javascriptnode.jsselenium-webdriverprotractor

Can JavaScript event listeners be compelled to trigger in a specific sequence?

Is there a way in JavaScript to receive notification or execute a callback function once an event has completed its propagation? Put differently, is it possible to 'prioritize' an event and ensure that it gets triggered after all other event lis ...

javascriptreactjs

Ensure the slider functions on all types of browsers

I found a code snippet for an image slider on codepen and integrated it into my project. However, I encountered some issues trying to center the slider in the browser window with 5% space on each side. I attempted using $(window).width(); to set the width ...

jqueryhtmlcssslideshowtransition

Troubleshooting PhantomJS hanging with WebdriverJS tests on Windows

I am currently using webdriverjs to run automated tests on a Windows 8 system. The tests run successfully when the browser is set to Chrome, but encounter issues when I switch to PhantomJS. Interestingly, the same tests run smoothly on OS X Mavericks. Ins ...

javascriptselenium-webdriverphantomjswebdriver-io

Transmit JSON data from the client to the MarkLogic Server device

Hello everyone, hope you are all doing well. I am a beginner in Marklogic and recently managed to set up a rest api on my local machine. Following the given example, I used curl to send/create documents in the database. Now, my query is how can I access/ ...

javascriptjsoncurlnosqlmarklogic

Looking to add a dynamic divider between two columns that can be adjusted in width by moving the mouse left and right?

If you're looking for an example of two columns adjusting their width based on mouse movement, check out this page from W3Schools. I'm trying to implement this feature in my React app, but I'm unsure of how to proceed. Below is the JSX code ...

javascriptcssreactjsnext.js

Where can I locate htmlWebpackPlugin.options.title in a Vue CLI 3 project or how can I configure it?

After creating my webpage using vue cli 3, I decided to add a title. Upon examining the public/index.html file, I discovered the code snippet <title><%= htmlWebpackPlugin.options.title %></title>. Can you guide me on how to change and cu ...

javascripthtmlnode.jstypescriptvue.js

Vue.js enhances user input interactions

CSS <span :style="{ display : displayTitle }" @click="toggleInput()"> {{ text }} </span> <input v-if="isEditing" type="text" v-model="text" @blur="hideInput" @keydown.enter="saveChanges" @keydown.esc="cancelE ...

javascripthtmlvue.jsinputfocus

What is the process for transferring a JSON data object to the server with JavaScript XMLHttpRequest?

When I attempt to send an XMLHttpRequest to a PHP server, I am encountering difficulties in getting the $_POST or $_REQUEST object to be filled with the data I am sending using JavaScript: var r = new XMLHttpRequest; r.open("POST", "http://url.com", true ...

javascriptphpajaxjsonxmlhttprequest

Access the Ajax response and store it in a JavaScript variable

I've successfully created a script that inserts data into an MySQL database using a modal and AJAX. However, I'm having trouble retrieving the response to complete an input field. Below is my current script: $.ajax({ url:"insertar_cl ...

javascriptjqueryajax