Search code examples
jquerytwitter-bootstrappopoverjscript

Bootstrap popover override title and keep style

It might be very simple question but I couldn't find the answer. How can I hide and show title in 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;
        }
    }

When I try the above code:

Iteration 1: popover with title and content

Iteration 2: popover with no title and content

Iteration 3: popover with not title and content (I expect this one be same as Iteration 1 but it does not show the title (header) anymore.

Any help?

This is page 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>

Solution

  • Yes you can, with a little destroy, and some time for it to execute. Here's the 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;
  }
}

    Before I put in the timeout, the destroy call didn't have time to finish, and would cause the popover to show and then hide immediately.

    See this updated bootply