Umbrella Umbrella - 1 year ago 236
Javascript Question

Bootstrap 3 Popover on click AND hover

I am using jquery javascript and css to make a popover working as a link trigger that shows the popover from a div BUT what I really need is that it shows on HOVER and also on click.

The current code I have is working if I click the link BUT I require it so that its on hover.


$('[data-toggle="click"]').popover();$(function(){ $('[rel=popover]').popover({ html : true, content: function() { return $('.popover_content_wrapper').html(); } }); });


<li class="menu-call"><a href="#" rel="popover" data-placement="bottom" title="Call Sales"><i class="icon-phone"></i><b>Call Sales</b></a>

Its working great if i click the link but its not ideal and I want it to do these things:

  1. Pop up on hover (as I intend using it as a kind of tooltip) but also for click (to please the mobile users)

  2. call the content from an INTERNAL URL so to not pollute the html code. My footer where the current div wrapper:popover_content_wrapper resides would be extremely large if i added everything in there. So calling an internal file to display the contents is a must.

  3. remove the # from the URL (that gets added IF i use the click method)

Answer Source

I usually include this in the element: data-trigger="hover click"

So in your example:

<a href="#" rel="popover" data-trigger="hover click" data-placement="bottom" title="Call Sales"><i class="icon-phone"></i><b>Call Sales</b></a>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download