Fix Community Usage's tooltip position

[HagerDakroury]

Specification

Devices

Laptop

Browser

Chrome, Firefox

Message

The tooltip associated with community usage is placed awkwardly

Steps to reproduce:

1. open the EDAM browser on fullscreen
2. click on any term (e.g https://edamontology.github.io/edam-browser/#format_3326)
3. hover over the community Usage title in the details panel

[manikmmalhotra]

hey @HagerDakroury can i work on this issue?

[HagerDakroury]

hi @manikmmalhotra , go ahead!

[manikmmalhotra]

hey i completed my setup and i dig the problelm and i found a solution i tried and it looks like this,
can you suggest me if its alright then i'll make the pull request

[HagerDakroury]

hi @manikmmalhotra, great job! this looks good.
Please, feel free to open a PR right away.

[bryan-brancotte]

hi @manikmmalhotra

Thanks for tackling this issue, I have some remarks with your solution of #228. By removing the colspan you narrowed the problem: indeed the element containing the text is too large when using bootstrap tooltip (wasn't the case if title="blabla"), but now one can clearly see that a cell is missing.

Also this solution reduce the space for the second column, so removing colspan is not the good approach. Finally, and surprisingly the margin:40% seems to have no effect in my Chrome.

I recommend you to observe if the issue appears elsewhere in the app, and if not, see how was it solved. Also you can simply find a better fix. Up tu you :o)

[manikmmalhotra]

hey @bryan-brancotte sorry as i just checked the code and i made this mistake it's width:40% and this is working fine in any browser sorry for the inconvenience

also the problem with tooltip is it'll be showing at the mid of the total width and i tried to change the tooltip position by changing the tooltipX variable in tree-edam-stand-alone.js so i have to reduce the width of the component to show make the tooltip within range

should i update my mistake and make another pull request
or do you have some suggestion for me

[bryan-brancotte]

Hi @manikmmalhotra
Indeed with with:40% I see an effect ! Although this solution cause some space to be "lost": look at the blank space "between" the columns.
colspan=2

width:40%

I suggest you to dive into the code to search at another place where this issue is fixed. As you can see the tooltip is working great for "Term":

Do not hesitate to propose a new solution, or ask me one. I neither want to waste your time nor spoiling the question on how to fix it.