twitter bootstrap popover and accordion

Question

I'm using twitter bootstrap framework and I'm trying to figure out how to provide accordion fallback for my popover(s),
I want to show popover on hover, but I want it to be destroyed (or hidden) when accordion status is set on "shown".
When accordion status is set on "hidden" I want the popover to be shown again on hover..

My html code:

<div class="row">
<div class="span4 offset4 text-center accordion" id="#accordion2">
    <div class="accordion-group">
        <div class="accordion-heading"> <a href="#collapseOne" class="accordion-toggle btn" id="pop-prize" data-toggle="collapse" data-parent="#accordion2" data-placement="bottom" title="Fantabulous title">
                                    PUSH ME
                                </a> 
        </div>
        <div id="collapseOne" class="accordion-body collapse evo-text-justify">Some lorem ipsum here.. Lorem.
            <br>Other ipsum text as well.</div>
    </div>
</div>

script section:

var contenuto = "Some lorem ipsum here.. Lorem.<br> Other ipsum text as well.";

$('#pop-prize').popover({
    html: true,
    title: "Fantabulous title",
    content: contenuto,
    trigger: 'manual'
}).hover(function (e) {
    jQuery(this).popover('toggle');
});
$('#accordion2').on('shown', function (e) {
   //popover hide here
    jQuery('#pop-prize').popover('hide');
});
$('#accordion2').on('hidden', function (e) {
   //popover back to be shown on hover
   jQuery('#pop-prize').popover('show');
});

jsfiddle
Thank you

Answer 1

First of all, the element that triggers the show and hidden events is the collapsible one, not its container. So the correct selector to toggle the popover visibility is #collapseOne , like this:

$('#collapseOne').on('show', function (e) {
    jQuery('#pop-prize').popover('hide');
});
$('#collapseOne').on('hidden', function (e) {
   jQuery('#pop-prize').popover('show');
});

You wil also need a way to prevent the popover to show when the accordion is expanded. You can achieve this by conditioning the show and hide actions to the #collapseOne status, this way:

$('#pop-prize').on('mouseenter', function (e) {
    if ($('#collapseOne').not('.in').length)
        jQuery(this).popover('show');
});
$('#pop-prize').on('mouseleave', function (e) {
    if ($('#collapseOne').not('.in').length)
        jQuery(this).popover('hide');
});

Here you have a complete jsfiddle .