jquery - Bootstrap popover override title and keep style -
it might simple question couldn't find answer. how can hide , show title in popover?
var = 1; function showhidetitle() { if (i == 1) { $('#txt2').attr("data-original-title", "error"); $('#txt2').attr("data-content", "message error"); $('#txt2').attr("data-trigger", "hover"); $('#txt2').attr("data-toggle", "tooltip"); $('#txt2').attr("data-placement", "bottom"); $('#txt2').popover({ container: 'body' }).popover('show'); = 2; } else { $('#txt2').attr("data-original-title", ""); $('#txt2').attr("data-content", "message good"); $('#txt2').attr("data-trigger", "hover"); $('#txt2').attr("data-toggle", "tooltip"); $('#txt2').attr("data-placement", "bottom"); $('#txt2').popover({ container: 'body' }).popover('show'); = 1; } }
when try above code:
iteration 1: popover title , content
iteration 2: popover no title , content
iteration 3: popover not title , content (i expect 1 same iteration 1 not show title (header) anymore.
any help?
this 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 = 1; function showhidetitle() { if (i == 1) { $('#txt2').attr("data-original-title", "error"); $('#txt2').attr("data-content", "message error"); $('#txt2').attr("data-trigger", "hover"); $('#txt2').attr("data-toggle", "tooltip"); $('#txt2').attr("data-placement", "bottom"); $('#txt2').popover({ container: "body" }).popover('show'); = 2; } else { $('#txt2').attr("data-original-title", ""); $('#txt2').attr("data-content", "message good"); $('#txt2').attr("data-trigger", "hover"); $('#txt2').attr("data-toggle", "tooltip"); $('#txt2').attr("data-placement", "bottom"); $('#txt2').popover({ container: "body" }).popover('show'); = 1; } } </script>
yes can, little destroy
, , time execute. here's js:
$(document).ready(function(){ $('button').click(function(e){ $('#txt2').popover('destroy'); settimeout(showhidetitle, 200); }); }); var = 1; function showhidetitle() { if (i == 1) { $('#txt2').attr({ "data-original-title":"error", "data-content": "message error", "data-trigger": "hover", "data-toggle": "tooltip", "data-placement": "bottom" }).popover({ container: 'body' }).popover('show'); = 2; } else { $('#txt2').attr({ "data-original-title":"", "data-content": "message good", "data-trigger": "hover", "data-toggle": "tooltip", "data-placement": "bottom" }).popover({ container: 'body' }).popover('show'); = 1; } }
before put in timeout, destroy call didn't have time finish, , cause popover show , hide immediately.
Comments
Post a Comment