如何在引导工具提示中显示表单元素？答案

【问题标题】：How to show form elements in bootstrap tooltip?如何在引导工具提示中显示表单元素？
【发布时间】：2020-11-05 03:11:54
【问题描述】：

我正在尝试在引导工具提示中显示表单元素，但它不起作用。 Tooltip 显示任何类型的 html，包括表格和列表，但不显示表单元素，即输入、选择等。

$(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>

【问题讨论】：

标签： html jquery css twitter-bootstrap twitter-bootstrap-tooltip

【解决方案1】：

在工具提示中使用sanitize 选项，设置为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>

【讨论】：