Afficher les balises XML dans hover à l'aide de l'info-bulle bootstrap

Question

Ce que j'essaie de faire est d'afficher un extrait XML dans mon attribut title, comme dans l'exemple ci-dessous.

Je sais enlever data-html="true" ou la mise à false fixerai, mais je dois aussi avoir une étiquette dans mon titre qui ressemble à l'extrait de code XML <strong style=color:red;>XML Tag: </strong>

Affichage en attribut title est pour l'affichage fin seulement. Il n'a pas l'intention d'être fonctionnel.

• Est-il possible que je peux exclure les balises XML de l'attribut infobulle data-html?
• Ou est-il un truc que je peux faire mon étiquette titre couleur rouge et gras sans utiliser la balise <strong></strong>, donc je peux tourner régler data-html-false?

Résultat attendu pendant vol stationnaire:

XML Tag:<note> XML a été conçu pour transporter des données - en mettant l'accent sur ce que les données </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>

Answer 1

La balise XMP html peut vous aider ici. Tout code HTML contenu dans une balise XMP ne sera pas rendu. Vous devrez peut-être le formater un peu pour le rendre meilleur. Il est obsolète mais semble fonctionner dans plus ou moins tous les navigateurs. Si vous voulez une compatibilité future complète, utilisez la deuxième 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>

Une autre option est de jeter le tout dans un <textarea> et le style de la zone de texte pour le faire paraître plus/pas comme une zone de texte comme il semble assez horrible sans enlever les frontières, 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>