Popover Hover Functionality on the branch

[santule]

Hello,

I am trying to add a popover text on branch hover. I looked at this issue 253 and try to replicate the solution using the latest phylotree version. Here are the snippets of my code, it does not give error but the on hovering over branches it does not work.

rendered_tree = tree.render({ height:height, width:width, container: container_id, "node-styler": colorNodesByName, "edge-styler": colorEdgesByTarget, "show-labels": true, "draw-size-bubbles": true, 'internal-names': true, 'left-right-spacing': "fit-to-size", 'align-tips': true });

function colorEdgesByTarget (element, data) { edge_colorizer (element, data); $(d3.select(element).node()[0]).popover({ 'container': 'body', 'content': "HELLO", 'html' : true, 'placement' : "left", 'trigger' : 'hover' }); }

I am not sure what is going wrong. Has someone tried branch hover on the latest version of phylotree and able to work it out?

Regards and appreciate your help.

[spond]

Dear @santule,

There are some issues with positioning using popover features of Bootstrap from what I recall. You may consider doing something that uses the <title> element, which displays simple text, but is more robust to various issues.

Best, Sergei

[santule]

Thank you @spond . I was able to make it work by using the code below.

// mouseover to get branch info element.on('mouseover', function() { console.log(element) br_annotation = element.selectAll("title"); br_annotation.text("HELLO"); //br_annotation.text(element._groups[0][0].__data__.tag); });

[santule]

This works using the "title" element.