frontendstudygroup / frontendstudygroup.github.io

Web application for the frontend study group from WomenWhoCode Frontend track.

https://frontendstudygroup.github.io/

17 stars 17 forks source link

avatar image and tooltip for bubbles #59

Closed Priyami closed 3 years ago

Priyami commented 3 years ago

Contributors git avatar image added inside the bubbles
- <def><pattern "id":"contributor_repo_id"><image "xlink:href": "avatar_url"></image></pattern></def> with attributes defined.
- For each node, <circle "fill":"#avatar_url"></circle>
Tooltip added for each bubble
- Tooltip<div> is defined with attributes like opacity, id, background color
- Three function showtooltip() movetooltip hidetooltip and its attributes defined in each function
- In each circle, event handler called as below. .on("mouseover", showTooltip) .on("mousemove", moveTooltip) .on("mouseleave", hideTooltip)

Priyami commented 3 years ago

@princiya

59 f5001172cd069f3ba63ceed9795d13a0d90cbf7c

Tooltip <div> was created, when I looked into the Developer tool. But it is not rendering on the screen. I have tried many attributes like z-index, background color, visibility. Nothing works. Please have a look.

princiya commented 3 years ago

Tooltip rendered on the DOM. Still, it's not perfectly pointed near the bubbles.

I have not tested this PR. but does the tooltip itself appear, and now you want to adjust its coordinates relative to the bubble? then use position:relative for div wrapper. the tooltip itself will be position:absolute and will be relatively positioned to the wrapper bubble.

Priyami commented 3 years ago

https://jarrettmeyer.com/2018/06/21/d3-capturing-mouse-events

-The above link shows how the mouse event captures the coordinates and other mouse events works.

In our case using the mousemove event, we got the coordinates and the tooltip displayed on the top left corner of each circle. We could add text or any link into the tooltip as required.

princiya commented 3 years ago

@Priyami there is a merge conflict with Bubblechart.css. when this is resolved, we can merge this PR. Thank you for you work... :)

Priyami commented 3 years ago

@Priyami there is a merge conflict with Bubblechart.css. when this is resolved, we can merge this PR. Thank you for you work... :)

@Princiya Thank you!. This is awesome and I like to learn and do more challenging work like this.

princiya commented 3 years ago

thanks @Priyami . good job 👏