Bootstrap 弹出窗口覆盖标题并保持样式

Question

这可能是一个非常简单的问题，但我找不到答案。如何在弹出窗口中隐藏和显示标题？

        var i = 1;

    function ShowHideTitle() {
        if (i == 1) {
            $('#txt2').attr("data-original-title", "Error");
            $('#txt2').attr("data-content", "Message is error");
            $('#txt2').attr("data-trigger", "hover");
            $('#txt2').attr("data-toggle", "tooltip");
            $('#txt2').attr("data-placement", "bottom");
            $('#txt2').popover({ container: 'body' }).popover('show');
            i = 2;
        } else {
            $('#txt2').attr("data-original-title", "");
            $('#txt2').attr("data-content", "Message is Good");
            $('#txt2').attr("data-trigger", "hover");
            $('#txt2').attr("data-toggle", "tooltip");
            $('#txt2').attr("data-placement", "bottom");
            $('#txt2').popover({ container: 'body' }).popover('show');
            i = 1;
        }
    }

当我尝试上面的代码时：

迭代 1：带有标题和内容的弹出窗口

迭代 2：没有标题和内容的弹出窗口

迭代 3：没有标题和内容的弹出窗口（我希望这个与迭代 1 相同，但它不再显示标题 (header)。

有什么帮助吗？

这是页面 HTML:

<html lang="en">

Temp_Free

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap-theme.min.css" rel="stylesheet" />

<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css" />

<!-- Site -->
<link href="css/fonts.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />

<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/site.js"></script>
<script type="text/javascript" src="js/moment.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>

<div class="container">
    <div class="row">
        <input id="txt2" value="TextBox2" />
        <button type="button" onclick="ShowHideTitle();">Click Me!!!!</button>
    </div>
</div>
<script>

    var i = 1;

    function ShowHideTitle() {
        if (i == 1) {
            $('#txt2').attr("data-original-title", "Error");
            $('#txt2').attr("data-content", "Message is error");
            $('#txt2').attr("data-trigger", "hover");
            $('#txt2').attr("data-toggle", "tooltip");
            $('#txt2').attr("data-placement", "bottom");
            $('#txt2').popover({ container: "body" }).popover('show');
            i = 2;
        } else {
            $('#txt2').attr("data-original-title", "");
            $('#txt2').attr("data-content", "Message is Good");
            $('#txt2').attr("data-trigger", "hover");
            $('#txt2').attr("data-toggle", "tooltip");
            $('#txt2').attr("data-placement", "bottom");
            $('#txt2').popover({ container: "body" }).popover('show');
            i = 1;
        }
    }
</script>

Answer 1

是的，您可以，只需要一点 destroy 和一些时间来执行。这是 JS:

$(document).ready(function(){
  $('button').click(function(e){
    $('#txt2').popover('destroy');
    setTimeout(ShowHideTitle, 200);
  });
});


var i = 1;

function ShowHideTitle() {
  if (i == 1) {
    $('#txt2').attr({
      "data-original-title":"Error",
      "data-content": "Message is error",
      "data-trigger": "hover",
      "data-toggle": "tooltip",
      "data-placement": "bottom"
    }).popover({ container: 'body' }).popover('show');
    i = 2;
  } else {
    $('#txt2').attr({
      "data-original-title":"",
      "data-content": "Message is Good",
      "data-trigger": "hover",
      "data-toggle": "tooltip",
      "data-placement": "bottom"
    }).popover({ container: 'body' }).popover('show');
    i = 1;
  }
}

在我设置超时之前，销毁调用来不及完成，会导致弹出窗口立即显示然后隐藏。

见this updated bootply

Bootstrap 弹出窗口覆盖标题并保持样式

Bootstrap popover override title and keep style

jquery

popover

twitter-bootstrap

jscript