CODEWITHSUNDEEP
javascriptjquerytwitter-bootstraptwitter-bootstrap-3
Umbrella
Umbrella

Reputation: 41

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.

THE JS:

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

AND THE 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)

Upvotes: 1

Views: 7182

Answers (1)

jona
jona

Reputation: 154

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>

Upvotes: 12

Related Questions