skip to Main Content

In the Tippy, I want to show tags in tooltip’s. For this,

I tried:

<i style="font-size:20px;" class="fa fa-info tippy" data-tippy-content="You do not need to add &lt;style&gt;....&lt;/style&gt; tags."></i>

OR

<i style="font-size:20px;" class="fa fa-info tippy" data-tippy-content="You do not need to add <style>...</style> tags."></i>

But both of them not show tooltip’s content correctly. I want it like this (This image created in Photoshop):

enter image description here

EDIT: But both of them show like this:

enter image description here

2

Answers


  1. You can add the allowHTML: false option to your .tippy class to make your HTML render as text rather than actually rendering the markup:

    tippy(".fa-info.allowHTML")
    
    tippy(".fa-info", {
      allowHTML: false
    })
    <script src="https://unpkg.com/popper.js@1/dist/umd/popper.min.js"></script>
    <script src="https://unpkg.com/tippy.js@4"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    
    <i style="font-size:20px;" class="fa fa-info tippy " data-tippy-content="You do not need to add &lt;style&gt;....&lt;/style&gt; tags."></i>
    <br />
    <br />
    <i style="font-size:20px;" class="fa fa-info tippy allowHTML" data-tippy-content=" Click <b>Send</b> button for sending..."></i>
    Login or Signup to reply.
  2. If you leave a space between the escaped characters, it seems to show your expected result.

    <script src="https://unpkg.com/popper.js@1/dist/umd/popper.min.js"></script>
    <script src="https://unpkg.com/tippy.js@4"></script>
    <button data-tippy-content="You do not need to add &lt; style &gt;....&lt; /style &gt; tags.">Text</button>
    <script>
      tippy('button')
    </script>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search