如何使用div作为bootstrap popover的触发器元素?

时间:2018-04-12 05:52:27

标签: jquery popover bootstrap-popover

当我点击a时我需要它才能工作,因为我有一个固定大小的div,里面只有一行文字,如下所示:

<div style="width:200px; height:200px; background-color:yellow" 
class="mytooltip" 
title="Dismissible popover" 
data-toggle="popover" 
data-trigger="focus" 
data-placement="auto right" 
data-content="Click anywhere in the document to close this popover">
  <a href="#">click me</a>
</div>

这是我尝试过的:

// 1st method
$(document).ready(function(){
  $('.mytooltip').click(function(e) {
    alert('clicked'); // this alert is fired
    $(this).popover(); // this doesn't
  });
});

我也找到了下面的方法,但是不是在点击时触发弹出窗口,而是在悬停时显示弹出窗口..所以我猜测这个方法并不关心元素的属性并且需要要在脚本中声明的popover参数,但我还没有找到关于此的任何引用..

// 2nd method
$('body').tooltip({
   selector: '.mytooltip',
   trigger: 'focus',
});

这是我最近一次尝试的jsfiddle

编辑:

  1. 我错误地写了工具提示&#39;当我的意思是&#39; popover&#39;在这个问题上。
  2. 事实证明第二种方法确实考虑了数据属性。(我没有对它进行足够的测试)。
  3. 但是当我点击链接时它仍然只触发弹出窗口。当我点击div区域时,它不会显示弹出窗口。
  4. 添加了一个jsfiddle链接以进一步澄清我的问题

0 个答案:

没有答案