special characters not working in bootstrap tooltip title data-html true

Question

I have issues with bootstrap tooltip title when I'm using data-html="true" for the title. I'm using html tags in tooltip title for font styles and line break. For this I used data-html="true". However when i used < (less than) icon, tooltip title text not displayed after less than icon (<)

<html><head>
          <title>Bootstrap Example</title>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
       </head>
       <body>
          <div class="container">
             <h3>Tooltip Example</h3>
             <a href="#" data-html="true" data-toggle="tooltip" data-original-title="title with <br /> special character <less than over me Hooray!">Tooltip </a>
          </div>
          <script>
             $(document).ready(function(){
                 $('[data-toggle="tooltip"]').tooltip();   
             });
          </script>
       </body>
</html>

It seems like your example is malformed and not highlighted properly. Also, i'd be a good idea to use code playground-site e.g. codepen.io to set up an example. — Kordonme
– Kordonme, Commented Nov 26, 2018 at 13:17
You mean you want a < to show in the tooltip text? Then use <. — Mr Lister
– Mr Lister, Commented Nov 26, 2018 at 13:19
Mt Lister, thanks for response. The tootlip title will come dynamically not static text. — Balu P
– Balu P, Commented Nov 26, 2018 at 13:23

Sumesh TG · Accepted Answer · 2018-11-26 13:22:42Z

1

 <html><head>
          <title>Bootstrap Example</title>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
          <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
       </head>
       <body>
          <div class="container">
             <h3>Tooltip Example</h3>
             <a href="#" data-html="true" data-toggle="tooltip" data-original-title='title with <br/> special character < less than over me Hooray!'>Tooltip </a>
          </div>
          <script>
             $(document).ready(function(){
                 $('[data-toggle="tooltip"]').tooltip();   
             });
          </script>
       </body>
</html>`

Just give space between special character and word. Othere it will parse as html tags or use &lt.

answered Nov 26, 2018 at 13:22

Sumesh TG

2,5732 gold badges17 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Balu P Over a year ago

thanks sumesh, but the tooltip title be dynamically placed.

Sumesh TG Over a year ago

@BaluP find and replace the possible special characters using string manipulation functions

Balu P Over a year ago

in this demo it worked, will see how it will be in the real time case, as manipulation function should not disturb the other html tags like <br /> & <b>

Sumesh TG Over a year ago

@BaluP Use unicodes corresponding to special characters for java,javascript programs. Refer rapidtables.com/code/text/unicode-characters.html

Collectives™ on Stack Overflow

special characters not working in bootstrap tooltip title data-html true

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related