Bootstrap popover override title и сохранить стиль

Это может быть очень простой вопрос, но я не смог найти ответ. Как я могу скрыть и показать название в popover?Bootstrap popover override title и сохранить стиль

 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

Это 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

Ты уничтожил бедный попкор, хороший трюк :) – Barsham

Bootstrap popover override title и сохранить стиль

ответ

Смежные вопросы