CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Viscocent
Viscocent

Reputation: 2064

Jquery Twitter Bootstrap popup tooltip, allow only 1 instance of popup at a time

I have this HTML code:

<table class="bag"> 
    <tr>
        <td id='slot0' item-type="" item-id="">
            <a href="#" id="tool1" rel="popover" data-content="cont" data-original-title="ti-ta" data-animation="false">
                <div class="bag-trigger"><tag style="z-index:10" id='tag0' class="hidden"></tag></div>
            </a>
        </td>

        <td id='slot1' item-type="" item-id="">
            <a href="#" id="tool2" rel="popover" data-content="cont" data-original-title="ti-ta">
                <div class="bag-trigger">
                    <tag id='tag1' class="hidden"></tag>
                </div>
            </a>
        </td> 
        <td id='slot2' item-type="" item-id="">
            <a href="#" id="tool3" rel="popover" data-content="cont" data-original-title="ti-ta">
                <div class="bag-trigger"><tag id='tag2' class="hidden"></tag></div>
            </a>
        </td> 
        <td id='slot3' item-type="" item-id="">
            <a href="#" id="tool4" rel="popover" data-content="cont" data-original-title="ti-ta">
                <div class="bag-trigger"><tag id='tag3' class="hidden"></tag></div>
            </a>
        </td>
    </tr>
</table>

This is my jQuery code:

<script>  
$(function () {
    for (var i = 1; i <= 16; i++) {
        $("#tool"+i).popover({animation:'false'});
        $("#tool"+i).popover({placement:'top'});  
        $("#tool"+i).popover({trigger: 'hover'});  
     }; 
});  
</script>

My problem is that I could open simultaneous popups at a time that I dont want. How can I close the others if I click 2 popups at a time without closing them?

Upvotes: 2

Views: 2894

Answers (4)

Sagar Gala
Sagar Gala

Reputation: 944

Another approach is to set trigger to 'manual' and handle a separate onclick/mouseover event to handle the show/hide for the tooltip. In this way you have more control over the click events.

$('[rel*=popover]').popover({trigger:'manual',animation:'false',placement:'top'});

$('[rel*=popover]').click(function () {
    $('[rel*=popover]').popover('hide');
    $(this).popover('show');
});

or

$('[rel*=popover]').popover({trigger:'manual',animation:'false',placement:'top'});

$('[rel*=popover]').mouseover(function () {
    $('[rel*=popover]').popover('hide');
    $(this).popover('show');
});

$('[rel*=popover]').mouseout(function () {
    $('[rel*=popover]').popover('hide');
});

Hope it helps!!

Upvotes: 0

Landon
Landon

Reputation: 256

HIDING OTHER POPOVERS

Your popovers trigger on hover so you need to bind hiding function to other popovers on mouseover event like this:

1) With ID selector (^ - starts with; all elements with ID that starts with 'test' keyword):

$("[id^='test']").mouseover(function () {
    $("[id^='test']").not(this).popover('hide');
});

This is good if you have few groups of popovers for example: testX (X - 1, 2, 3 ...) and headerX (X - 1, 2, 3 ...) and you want to be active only one popover in specific group.

2) With REL selector (all elements with REL attribute equal "popover"):

$("[rel='popover']").mouseover(function () {
    $("[rel='popover']").not(this).popover('hide');
});

POPOVERS INITIALIZATION

Don't use for loop to initialize popovers on html elements. Use JQuery selectors like this:

1) ID selector

$("[id^='test']").popover(
    {trigger:'hover',animation:'false',placement:'top'}
);

2) REL selector

$("[rel='popover']").popover(
    {trigger:'hover',animation:'false',placement:'top'}
);

Upvotes: 3

Carol Skelly
Carol Skelly

Reputation: 362820

You could set all of the popovers at once like this. Only one would be active at a time.

$('[rel*=popover]').popover({trigger:'hover',animation:'false',placement:'top'});
$('[rel*=popover]').click(function () {
     $('[rel*=popover]').not(this).popover('hide');
});

Upvotes: 2

Matthew Graves
Matthew Graves

Reputation: 3294

<script>  
$(function () {
    for (var i = 1; i <= 16; i++) {
       $("#tool"+i).popover({animation:'false'});
       $("#tool"+i).popover({placement:'top'});  
       $("#tool"+i).popover({trigger: 'hover'});  
       $("#tool"+i).mouseout(function(){$(this).hide()});
     }; 
});  
</script>

Upvotes: 0

Related Questions