Bootstrap popover覆盖标题并保留样式

这可能是一个非常简单的问题，但我找不到答案。如何在popover中隐藏和显示标题？Bootstrap popover覆盖标题并保留样式

 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相同，但不会显示标题（标题）了。

任何帮助吗？

这是网页的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>

来源

2015-04-29 Barsham

你能提供html吗？（只是相关部分） – dbd

It is Bootstrap v3.3.4 – Barsham

是你可以用一点点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

来源

2015-04-29 14:49:41 Ted

谢谢，你的意思是我没有办法删除标题并将其恢复。我能否至少改变两种不同颜色的标题颜色？在jscript？ – Barsham

@Barsham我挖得更深一些，并更新了答案并将bootply联系起来以反映你想要做什么。 – Ted

你摧毁了可怜的popover，不错的诀窍:) – Barsham

Bootstrap popover覆盖标题并保留样式

回答

相关问题