Question 243466 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Show raised text on hover in React

I was looking for an online library to be able to show the text "Click To Copy" when the mouse goes over a paragraph but I didn’t find anything (I don’t want a writing to appear somewhere I want it to appear in a comic style, attached a photo).
Click To Copy Image
Can you advise me how I can do it or, even better, if you know of any libraries that do this?

Thanks in advance,
Fabio

I tried to do it myself with css but it didn’t turn out very well

Tags:

2

Answers


  1. 0

    look at this code. you can change the styling for your self as well this is just a simple sample :

    <!DOCTYPE html>
<html>
<head>
  <style>
    .comic-bubble {
      position: relative;
      display: inline-block;
    }

    .comic-bubble:hover:before {
      content: "Click To Copy";
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      padding: 5px;
      background-color: #FDF5E6; /* Adjust the color to your liking */
      border: 1px solid #000;
      border-radius: 5px;
      font-family: "Comic Sans MS", cursive;
      font-size: 14px;
      white-space: nowrap;
      visibility: visible;
      opacity: 1;
      transition: visibility 0s, opacity 0.3s linear;
    }

    .comic-bubble:before {
      visibility: hidden;
      opacity: 0;
    }
  </style>
</head>
<body>
  <p class="comic-bubble">Your paragraph text here</p>
</body>
</html>
    Login or Signup to reply.
  2. 0

    There are a lot of spproaches to this particular UI element. I like tailwindcss, so i’ll be proposing a solution based on that. Below is a code snippet for your reference:

    <button data-tooltip-target="tooltip-default" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Default tooltip</button>
<div id="tooltip-default" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
    Tooltip content
    <div class="tooltip-arrow" data-popper-arrow></div>
</div>

    this should work. Visit this link for further details.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search