Search code examples
twitter-bootstrappopover

Trigger another item's popover with hover

I am building a webapp using Twitter Bootstrap. I would like to also show an input's popover when the input in the previous cell is hovered. I currently invoke $('input').popover(); (which I might specify a bit more, but it's fine for now).

html:

<tr>
    <td><input id="client-id" type="text"></td>
    <td><input id="client-name" type="text" tabindex="0" data-toggle="popover" data-trigger="hover" data-content="this is a popover"></td>
</tr>

I want the popover of #client-name to also show when #client-code is hovered. Do I achieve this by adjusting the javascript? Or can I achieve this with the data-toggle type attributes?

Solution

  • You could trigger the popover manually on both #client-name and #client-id mouseover(). Then hide the popover on mouseleave(), if off course the new target not is one of #client-name or #client-id :

    $('#client-name, #client-id').mouseover(function() {
    $('#client-name').popover('show');
});    
$('#client-name, #client-id').mouseleave(function(e) {
    var id=$(e.relatedTarget).attr('id');
    if (id!='client-name' && id!='client-id') $('#client-name').popover('hide');
});

    demo -> http://jsfiddle.net/xwjfgnjj/

    Update. I guess you with "wildcard jQuery id selector" mean something like *-name? You could use something like the attributeEndsWith selector, eg $('[id$="-id"]') to get all elements with id's ending with -id. The following does the same as the answer above, but on multiple rows, assuming the <input>'s have id's ending with -id and -name :

    $('[id$="-id"], [id$="-name"]').mouseover(function() {
    var id='#'+$(this).attr('id').split('-')[0]+'-name';
    $(id).popover('show');
});    
$('[id$="-id"], [id$="-name"]').mouseleave(function(e) {
    var label = $(this).attr('id').split('-')[0],
        id=$(e.relatedTarget).attr('id');
    if (id!=label+'-name' && id!=label+'-id') $('#'+label+'-name').popover('hide');
});

    demo -> http://jsfiddle.net/LtL1gL0e/