How to show form elements in bootstrap tooltip?

user_11957408 0
Viewed 200

I am trying to show form elements in bootstrap tooltip but it's not working. Tooltip shows any type of html including tables and list, but doesn't display form elements i.e input, select etc.

$(document).ready(function(){
html= '<div><select><option>option1</option><option>option1</option><option>option1</option><option>option1</option><option>option1</option></select></hr><input type="text"/></hr><input type="radio" name="abc"/><input type="radio" name="abc"/><input type="radio" name="abc"/><input type="radio" name="abc"/><input type="radio" name="abc"/><input type="checkbox"/></div>';
$('#example').tooltip({title: html,html:true,placement: "bottom"});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  
  
<div class='list-items'>
<span id="example">Test Div</span>
</div>

twitter-bootstrap-tooltip twitter-bootstrap css html jquery
1 Answers

Use the sanitize option in tooltips, set as false...

$(document).ready(function() {
  var html = '<div><select><option>option1</option><option>option1</option><option>option1</option><option>option1</option><option>option1</option></select></hr><input type="text"/></hr><input type="radio" name="abc"/><input type="radio" name="abc"/><input type="radio" name="abc"/><input type="radio" name="abc"/><input type="radio" name="abc"/><input type="checkbox"/></div>';

  $('#example').tooltip({
    title: html,
    html: true,
    placement: "bottom",
    sanitize: false
  });
});
<div class='list-items'>
  <span id="example">Test Div</span>
</div>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

user_8888940
Related