控制元件程式碼

<button rel="popover" data-content="{{item.remark}}" data-html="true" class="pop">詳情</button>

item.remark是django的方式，呼叫python中class的remark屬性。

彈框程式碼

<script type="text/javascript">
$(document).ready(
			function(){
				$(".pop").popover({placement:'right', trigger:'manual', delay: {show: 100, hide: 100},
					content: function () {
					  return ("#data-content"); // 把content變成html
					}});
				$('body').click(function (event) {
					var target = $(event.target);       // 判斷自己當前點選的內容
					if (!target.hasClass('popover')
							&& !target.hasClass('pop')
							&& !target.hasClass('popover-content')
							&& !target.hasClass('popover-title')
							&& !target.hasClass('arrow')) {
						$('.pop').popover('hide');      // 當點選body的非彈出框相關的內容的時候，關閉所有popover
					}
				});
				$(".pop").click(function (event) {
					$('.pop').popover('hide');          // 當點選一個按鈕的時候把其他的所有內容先關閉。
					$(this).popover('toggle');          // 然後只把自己開啟。
				});
			}
		);*/
</script>
 

新增：

$(".pop").click(function (event) {
					var s = "你好"//對content賦值
					$(this).attr('data-content', s);
					$('.pop').popover('hide');          // 當點選一個按鈕的時候把其他的所有內容先關閉。
					$(this).popover('toggle');          // 然後只把自己開啟。
				});