Update popover() method to prevent its untimely dismissal

[Git-Harshit]

Checklist

• I indicated which issue (if any) is closed with this PR using closing keywords
• I only changed lines related to my PR (no bulk reformatting)
• I indicated the source and check the license if I re-use code, or I did not re-use code
• I made my best to solve only one issue in this PR, or explain why multi had to be solved at once.

Issue

fix #225.
Do check the working GIF for the proposed change on this Issue (#225).

Details

Updated popover() methods in tree-edam-stand-alone.js file by passing container option to it in order to prevent its dismissal when the mouse is moved to the popover content, from the anchor tag that launched it.

Providing ':scope' as selector string in container property allows popover element to be placed under the ':scope' or the current (here, <a>) element that called it, thus making the popover <div> a child element of <a>, thus letting hover on popover to maintain mouseover hover on the triggering <a> tag, and preventing its untimely dismissal. Additionally, passing trigger: "hover focus" option allows the popover to trigger on either mouse hover, or on focus on the element.

Please check it out, and let me know if any updations or additional information is required for it.

[bryan-brancotte]

Hi, thanks @Git-Harshit for this PR, I have some remarks that you will find attached, and also I have a graphical bug : when hovering biotools line, it is biosphere who is triggered.

Additionally, and maybe it's a compatibility issue, but I don't see in Chrome 91 that the patch is fixing the issue, as you can see in the attached gif.

[bryan-brancotte]

Triggering also on focus is a good idea, but should be done when the popover is written (in once place) instead on when it is instanciated (4 times). The part was not readable at the time, I improved it and you can see [here](https://github.com/edamontology/edam-browser/blob/main/js/tree-edam-stand-alone.js#L256-L261 that you can change properties for all link with popover

[bryan-brancotte]

Hi again,

I am not aware of :scope I most of the time use mouseover/mouseout as you can see here

[Git-Harshit]

Hi @bryan-brancotte, thank you for your detailed review. After looking into it further, I too have found out that :scope isn't really functioning as expected, so as a quick fix, I have updated the container option from :scope to your same code that specifies the selector before .popover() method. Now, it seems to function better on individual hover, as demonstrated in the GIF Below:

However, there still seems to be a small issue around the biosphere popovers. Moving mouse from first biosphere link to its popover seems to close its own popover and launch popover of the second link to its right (This is visible at the end of above GIF, if you could observe). Please see if this issue is reproducible at your end as well. Rest seems to be working fine.

Yes, the mouseover/mouseout example in your follow-up seems to have the right behavior of the popover. While I try to understand the current code snippet and its conversion to your given example, feel free to update the code, and let me know if any other changes are needed from my end.

[bryan-brancotte]

We are getting close ! Thanks for finding the container, and how to make it works !

[bryan-brancotte]

For the other community usage, there was only one link, so #details-'+identifier+' .'+id_???+' [data-toggle="popover"] was returning only one link. Here we have to links, one for appliances, on for tools, the container of the popover is then both of them.

The fixe would be to distinguish the two link, I think adding an optional css_classes attribute to both to_biosphere_href and to_generic_href would allow to then do

                 $('<span>' +
                 to_biosphere_href(c[0],caller_s.get_url(),data[0],'app') + ' by appliances, ' +
                 to_biosphere_href(c[1],caller_s.get_url(),data[1],'tool') + ' by tools.' +
                 '</span>').appendTo(elt);
                $('#details-'+identifier+' .'+id_s+' [data-toggle="popover"].app').popover({container: '#details-'+identifier+' .'+id_s+' [data-toggle="popover"].app'});
                $('#details-'+identifier+' .'+id_s+' [data-toggle="popover"].tool').popover({container: '#details-'+identifier+' .'+id_s+' [data-toggle="popover"].tool'});

[Git-Harshit]

I couldn't completely follow on the requirement for the new optional .app and .tool classes addition as suggested, and this may require additional changes on to_biosphere_href(...) and to_generic_href(...) functions.
I can separately commit it so that if anything goes different, that individual commit can be improved or reverted.

[Git-Harshit]

Just tried the suggested change on adding a class to separate .app and .tool, and those popovers too work very well, without giving any note on one popover opening another one. Thank you very much for these pointed suggestions. I have implemented and pushed it, please review and merge if it looks resolved.

[bryan-brancotte]

It seems to work better !

I think we should wrap this "patch" in a function call, indeed it is error prone to have to copy past the selector. We wrapping we would then do

build_popover('#details-'+identifier+' .'+id_b+' [data-toggle="popover"]');

which would call

function build_popover(selector){
    $(selector).popover({container: selector});
}

[Git-Harshit]

Yes, doing so would actually reduce the repetitive selector part in code, and will make it cleaner. This would definitely be better than the existing change.

[Git-Harshit]

I somehow missed on making this change for quite long, but better later than never. Thanks for keeping this pull request in the last state, I have added build_popover function with its selector just as suggested.