1

I want to show the bootstrap popover on hover. In popover content i have list action items. When i levave the element which i used to show the popver its getting disappeared. I want it to dispaly until i'm on the popover.

is it posible?

<a href="#" class="btn btn-info" data-toggle="popover" data-content="hello" data-title="Welcome" data-placement="left"><i class="fa fa-anchor"></i> Goto</a>

the Js is 

$('[data-toggle=popover]').popover({ plcement:"left", title:"Heloo", content:"Welcome" });

How to have the popover remains present until i'm leaving from the popover content?

Improve this question

1 Answer 1

Reset to default
2

Set the popover trigger, and then use a template in the popover that will hide itself when mouseout occurs...

$("[data-toggle=popover]").popover({ trigger: 'manual', animate: false, html: true, placement: 'left', template: '<div class="popover" onmouseover="$(this).mouseleave(function() {$(this).hide(); });"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>' }).click(function(e) { e.preventDefault() ; }).mouseenter(function(e) { $(this).popover('show'); });

Bootply

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

For some reason, if I open the Bootply example in Codeply it works as advertised. However, if I open it in the Codeply preview (external window - pop-up) – I can still select the tooltip text, but on right click it disappears. This also happens when I try to replicate the example (the tool-tip window disappears) on right click.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.