как использовать div в качестве триггерного элемента для всплывающего окна начальной загрузки?

Мне нужно, чтобы это работало, когда я нажимаю на, потому что у меня есть 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
  });
});

и я также нашел метод ниже, но вместо того, чтобы запускать всплывающее окно при нажатии, всплывающее окно отображается при наведении.. поэтому я предполагаю, что этот метод не заботится о свойствах элемента и требует, чтобы параметры всплывающего окна были объявлены в script, но я не нашел никаких упоминаний об этом ..

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

вот jsfiddle моей последней попытки

РЕДАКТИРОВАТЬ:

1. Я по ошибке написал «подсказку», когда имел в виду «всплывающее окно» в этом вопросе.
2. оказывается, что второй метод действительно учитывает свойства данных.. (я недостаточно проверял его).
3. но он по-прежнему вызывает всплывающее окно только тогда, когда я нажимаю на ссылку. всплывающее окно не отображается, когда я нажимаю на область div.
4. добавил ссылку jsfiddle, чтобы уточнить мой вопрос