Add tooltips across buttons in interface to help tutorialize use

phetsims / paper-land

Build and explore multimodal web interactives with pieces of paper!

https://phetsims.github.io/paper-land/

MIT License

20 stars 3 forks source link

Add tooltips across buttons in interface to help tutorialize use #270

Open brettfiedler opened 2 months ago

brettfiedler commented 2 months ago

Can use the Tooltip from react-bootstrap/Tooltip to use OverlayTrigger on buttons.

CameraMain.js for example

<OverlayTrigger placement='left' overlay={<Tooltip id='tooltip'>Click to toggle the sidebar</Tooltip>}>
<Button
  onClick={() => this.setState({ sidebarOpen: !this.state.sidebarOpen })}
>
  {this.state.sidebarOpen ? '☰ Close Sidebar' : '☰ Open Sidebar'}
</Button>
</OverlayTrigger>

Will work on adding this to other buttons across the interface.

brettfiedler commented 2 months ago