Search code examples
jqueryhtmlcsstwitter-bootstrap-3twitter-bootstrap-tooltip

Show XML tags on hover using bootstrap tooltip

What I'm trying to do is display a XML snippet in my title attribute like the example below.

I know removing data-html="true" or setting it to false will fix it, BUT I also need to have a label in my title which is like the<strong style=color:red;>XML Tag: </strong>

Displaying XML snippet in title attribute is for displaying purpose only. It doesn't intended to be functional.

  • Is there any way that I can exclude the XML tags from tooltip data-html attribute?
  • Or is there any trick that I can make my title label color red and bold without using the tag <strong></strong>, so I can just turn set data-html to false?

Expected output during hover:

XML Tag: <note>XML was designed to carry data - with focus on what data </note>

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip(); 
});
a{
 display:block;
 width: 200px;
 margin:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>



<a href="#" data-html="true" data-toggle="tooltip" data-placement="bottom" title="<strong style=color:red;>XML Tag: </strong>&#60;note&#62;XML was designed to carry data - with focus on what data is&#60;&#47;note&#62;">Hover to see what is XML</a>

Solution

  • The XMP html tag can help you here. Any HTML inside a XMP tag will not be rendered. You may need to format it a little to make it look better. It is deprecated but seems to work in more or less all browsers still. If you want complete future compatibility use the second option.

    $(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip(); 
});
    a{
 display:block;
 width: 200px;
 margin:auto;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>



<a href="#" data-html="true" data-toggle="tooltip" data-placement="bottom" title="<strong style=color:red;>XML Tag: </strong><xmp>&#60;note&#62;XML was designed to carry data - with focus on what data is&#60;&#47;note&#62;</xmp>">Hover to see what is XML</a>

    Another option is to throw it all into a <textarea> and style the text area to make it look better/not like a text area as it looks pretty horrible without removing the borders etc.

    $(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip(); 
});
    a{
 display:block;
 width: 200px;
 margin:auto;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>



<a href="#" data-html="true" data-toggle="tooltip" data-placement="bottom" title="<strong style=color:red;>XML Tag: </strong><textarea>&#60;note&#62;XML was designed to carry data - with focus on what data is&#60;&#47;note&#62;</textarea>">Hover to see what is XML</a>