Question 11011 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Show tooltip for span after click on – Jquery

I want to copy text o span in clipboard, then show tooltip for it.

I use this code.

  spans = document.querySelectorAll(".copy");
  for (const span of spans) {
    span.onclick = function() {
        document.execCommand("copy");
    }

    span.addEventListener("copy", function (event) {
         event.preventDefault();
        if (event.clipboardData) {
           event.clipboardData.setData("text/plain", span.textContent);
            span.tooltip({ content: span.textContent });
            span.tooltip("open");

        }
    });
}

it copy text to clipboard but dont show tooltip!!

Tags:

2

Answers


  1. 0

    I created a code snippet to test your code.

    spans = document.querySelectorAll(".copy");
for (const span of spans) {
    span.onclick = function() {
        document.execCommand("copy");
    }

    span.addEventListener("copy", function (event) {
        event.preventDefault();
        if (event.clipboardData) {
           event.clipboardData.setData("text/plain", span.textContent);
           alert("hello world");
           span.tooltip({ content: span.textContent });
           span.tooltip("open");
        }
    });
}
    <span class="copy">Hello!</span>

    When I run the code snippet, and click on the "Hello!" text, I get this error:

    Uncaught TypeError: span.tooltip is not a function

    The tooltip function is not a standard JavaScript function. Is it a jQuery function?

    Since you have included the jQuery tag in your question, I assume that tooltip is a jQuery function, or a function from a jQuery plugin.

    In this case you have to:

    1. Wrap the span element in $(...) to make it a jQuery object.
2. Include the jQuery library.
3. Include any jQuery plugins that are needed.

    If tooltip is indeed a jQuery function, then you can use these lines of code:

    $(span).tooltip({ content: span.textContent });
$(span).tooltip("open");
    Login or Signup to reply.
  2. 0

    Assuming you are using jQuery UI, you need to include the jQuery and jQuery UI libraries in your HTML file before your JavaScript code. Then, you can initialize the tooltip on your span element using the tooltip() function.

    <script>
  spans = document.querySelectorAll(".copy");
  for (const span of spans) {
    span.onclick = function() {
        document.execCommand("copy");
    }

    span.addEventListener("copy", function (event) {
         event.preventDefault();
        if (event.clipboardData) {
           event.clipboardData.setData("text/plain", span.textContent);
            span.tooltip({ content: span.textContent });
            span.tooltip("open");

        }
    });

    $(span).tooltip();
  }
</script>

    you need to replace the span.tooltip({ content: span.textContent }); with $(span).attr("title", span.textContent); to set the title attribute of the span element to the tooltip text.

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

Back To Top
Search