Trigger another item's popover with hover

Question

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?

davidkonrad · Accepted Answer · 2015-02-14T17:45:55.103

1

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/

edited Feb 14 '15 at 17:45

answered Feb 13 '15 at 11:28

davidkonrad

83,997
17
205
265

I thought of that, but I have some more content in the row which I omitted for the sake of the example.I don't want the popover when those are overed, and I don;t want the popover to come out the side of the table either. – Chielt Feb 13 '15 at 11:48
@Chielt, Oh I see! See updated answer. I dont think you automatically can assign a popover to multiple triggers, but you can always activate the popover manually. – davidkonrad Feb 13 '15 at 12:48
@davidkonrad -- noted your comment, removed answer :) – Ted Feb 13 '15 at 15:36
That is exactly the behaviour I am looking for. I am not really experienced with jQuery. Could you explain to me how I might use the jQuery with a wildcard jQuery id selector? In that way I don't need to add javascript for every row in the table :). – Chielt Feb 14 '15 at 09:09
@Chielt, see if the updated answer is any worth. I believe using classes as selectors somehow would give more simple and readable code. Like having a `.pop` and `.pop-cnt` on the inputs. It get complicated when you must target multiple unique `id`'s :) – davidkonrad Feb 14 '15 at 17:52
@davidkonrad, wow, I really appreciate your help. Hoever, when I try you jsfiddle in safari (OS X), the moudeleave seems to be buggy. If I move my mouse vertically over a column, I end up seeing 3 popovers. I can hide them again by hovering the input, and uncovering it at the side... – Chielt Feb 14 '15 at 18:18
@Chielt. I cannot debug or reproduce that, does not have a mac :( Have just tested it in windows7 with IE9, _Safari_, Opera, Chrome and FF, and in both Ubuntu 10.04 and 14.04 Chrome, FF and Opera - works in all browsers. Sounds like `e.relatedTarget` not is properly set in Safari for mac, under certain circumstances. Try using `e.toElement` or `e.toElement || e.relatedTarget`, perhaps it make a difference. See this -> http://stackoverflow.com/a/7761228/1407478 Otherwise I have no idea. – davidkonrad Feb 14 '15 at 22:17
I haven't been able to test it in my project in OS X, but it works fine under Windows :) – Chielt Feb 23 '15 at 08:49

Trigger another item's popover with hover

1 Answers1