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

Create Hoverover Info Box #175

Closed
2 tasks done
brodly opened this issue Jan 15, 2020 · 5 comments · Fixed by #282
Closed
2 tasks done

Create Hoverover Info Box #175

brodly opened this issue Jan 15, 2020 · 5 comments · Fixed by #282
Assignees
@jmensch1
Labels
Role: Frontend React front end work v1 The first version of the site
Milestone
311 Data Alpha - ...

Comments

@brodly
Copy link
Member

brodly commented Jan 15, 2020 •
edited by jmensch1
Loading

Overview

General component to display hover over information when a user hovers over the info icon on the UI

Action Items

  • Research Bulma ability to display hover over elements
  • Create reusable functional component that can take in title and text as props

Image for guidance:
Screen Shot 2020-01-14 at 8 00 57 PM
@brodly brodly added the Role: Frontend React front end work label Jan 15, 2020
@brodly brodly changed the title [Components] Hoverover Info Box [React Component] Hoverover Info Box Jan 15, 2020
@brodly brodly changed the title [React Component] Hoverover Info Box Create Hoverover Info Box Jan 15, 2020
@adamkendis
Copy link
Member

Dropping links to a decent looking Bulma tooltip extension for whoever picks up this ticket.
bulma-tooltip docs
npm

@jmensch1
Copy link
Contributor

Hi guys, I'm new here. Anyone mind if I take a shot at this ticket?

Looking forward to meeting you on Tuesday.

@brodly
Copy link
Member Author

brodly commented Feb 20, 2020 via email

@jmensch1
Copy link
Contributor

Morning guys, thanks for setting me up with the permissions.

I checked out bulma-tooltip, but it only accepts a string for the tooltip content, so you can't distinguish between a title and text within the tooltip. (And it won't parse an HTML string if you try to hack it that way).

So I ended up using react-tooltip, which lets you put arbitrary content in the tooltip.

This was linked to pull requests Feb 21, 2020
added IconWithInfo component that shows info box on hover #281
Closed
added HoverOverInfo component #282
Merged
@jmensch1 jmensch1 removed a link to a pull request Feb 22, 2020
added IconWithInfo component that shows info box on hover #281
Closed
adamkendis added a commit that referenced this issue Feb 23, 2020
@adamkendis
Merge pull request #282 from hackforla/175-FRONT-HoverOverInfo
3571bea 
Closes #175 
added HoverOverInfo component
@adamkendis
Copy link
Member

Merged #282

@ExperimentsInHonesty ExperimentsInHonesty added the v1 The first version of the site label Aug 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jmensch1 jmensch1

Labels
Role: Frontend React front end work v1 The first version of the site
Projects
P: 311: Project Board
Status: Done
Milestone
311 Data Alpha - Dev Complete
Development

Successfully merging a pull request may close this issue.

added HoverOverInfo component hackforla/311-data
5 participants
@sellnat77 @jmensch1 @brodly @ExperimentsInHonesty @adamkendis