Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Hover box in the Community Usage section #225

Open
melibleq opened this issue Jul 31, 2021 · 3 comments · May be fixed by #227
Open

Hover box in the Community Usage section #225

melibleq opened this issue Jul 31, 2021 · 3 comments · May be fixed by #227
Assignees
@HagerDakroury
Labels
bug good first issue Good for newcomers ux/ui design Features that involve a degree of UX/UI design

Comments

@melibleq
Copy link
Member

Specification

Devices

Laptop

Browser

Brave

Message

Hi people! Would it be possible to keep visualizing the community usage box also while hovering over the box? See in the gif below how it disappears. Thanks!

EDAM ontology browser
@melibleq melibleq added the bug label Jul 31, 2021
@HagerDakroury HagerDakroury added good first issue Good for newcomers ux/ui design Features that involve a degree of UX/UI design labels Jul 31, 2021
@HagerDakroury HagerDakroury self-assigned this Jul 31, 2021
@Git-Harshit
Copy link

Git-Harshit commented Aug 1, 2021 •
edited
Loading

I see, this issue is occuring as per the working of Bootstrap Popovers.
As the mouse is hovered out of <a> tag (which is the popover toggle), the corresponding popover disappears.

One quick fix I can think for this is to embed the popover <div> inside <a ... data-toggle="popover" ...> by calling popover method with {container: ":scope"}.
Only four lines (line 431, 444, 454 and 464) of your js/tree-edam-stand-alone.js file with .popover() method can be replaced with .popover({container: ":scope"}), and it should work fine then, as popover <div> then becomes a part of <a>, and hovering it does not remove mouse hover from <a>.

I have tried it out locally, and it seems to work fine for now. Have a look at the GIF below:
ezgif com-gif-maker

If this works, please feel free to directly add it to your code, or let me know if you need a PR against this! And if you come across any better solution, do mention!

@HagerDakroury
Copy link
Collaborator

Hi @Git-Harshit, thanks for the thorough explanation and for looking into this.
Please feel free to open a PR right away!

@Git-Harshit
Copy link

Sure!

@Git-Harshit Git-Harshit linked a pull request Aug 1, 2021 that will close this issue
Open
4 tasks
Git-Harshit added a commit to Git-Harshit/edam-browser that referenced this issue Apr 11, 2024
@Git-Harshit
Add classes to separate app and tool selection pop
913c681 
Uses css_classes to add class selector for generic_href as suggested to
distinguish .app-liances and .tool-s for separate popover initialization
to prevent unexpected popover switch on mouse hover.
'css_classes' has been carefully added as an optional parameter with
default blank value on all callers of to_generic_href wrappers.

Fix: edamontology#225

Signed-off-by: Harshit Gupta <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@HagerDakroury HagerDakroury

Labels
bug good first issue Good for newcomers ux/ui design Features that involve a degree of UX/UI design
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Update popover() method to prevent its untimely dismissal Git-Harshit/edam-browser
3 participants
@melibleq @HagerDakroury @Git-Harshit