An icon displaying a tooltip on hover.
You can access the storybook for this component here.
The component accepts the props defined bellow in the table.
Name | Type | Required | Default | Description |
---|---|---|---|---|
Icon | React.ComponentType | yes | - | The icon (from @material-ui/icons) |
placement | TooltipPlacement | no | bottom | The placement of the tooltip text |
text | string | no | undefined | The tooltip text |
IconWithTooltip uses | Material-ui | Material-ui icons | React |
---|---|---|---|
1.0.x | 4.3.0 | 4.2.1 | 16.8.6 |
1.1.x | 4.3.2 | 4.2.1 | 16.9.0 |
1.2.x | 4.9.0 | 4.5.1 | 16.9.0 |
1.3.x | 4.10.2 | 4.9.1 | 16.9.0 |
1.4.x | 4.11.0 | 4.9.1 | 16.9.0 |
1.5.x | 4.11.3 | 4.11.2 | 16.9.0 or 17.0.0 |
2.0.x | 5.5.1 | 5.5.1 | >= 17.0.0 |
3.0.x | 5.10.17 | 5.10.16 | >= 18.0.0 |
3.1.x | 5.14.20 | 5.14.19 | >= 18.0.0 |
- Major - it will be increased if the major version of the dependat package changes or there are breaking changes in the code of IconWithTooltip
- Minor - it will be increased if no major version of the dependat package changes, but there are changes of the minor or patch versions of it
- Patch - it will be increased if there are no changes of the dependat packages, but there are non breaking changes in the code of IconWithTooltip
Displaying an icon with a tooltip positioned above:
import * as React from 'react';
import IconWithTooltip from 'icon-with-tooltip';
import CustomIcon from '@material-ui/icons/CardTravel';
class App extends React.Component {
render() {
return (
<div className="App">
<IconWithTooltip
Icon={CustomIcon}
text="The content of the tooltip"
placement="top"
/>
</div>
);
}
}
export default App;
Using the predefined icons with tooltip components:
import * as React from 'react';
import { SuccessIconWithTooltip } from 'icon-with-tooltip';
class App extends React.Component {
render() {
return (
<div className="App">
<SuccessIconWithTooltip text="Success" placement="left" />
</div>
);
}
}
export default App;
import * as React from 'react';
import { ErrorIconWithTooltip } from 'icon-with-tooltip';
class App extends React.Component {
render() {
return (
<div className="App">
<ErrorIconWithTooltip text="Error" placement="right" />
</div>
);
}
}
export default App;
import * as React from 'react';
import { InfoIconWithTooltip } from 'icon-with-tooltip';
class App extends React.Component {
render() {
return (
<div className="App">
<InfoIconWithTooltip text="Info" placement="right" />
</div>
);
}
}
export default App;
- icon-with-tooltip is made publicly available
- Fixed the types file
- Display the custom icons inline
- Update packages
- Update packages
- Updated packages
- Moved from npm to yarn
- Update packages
- Update packages
- Fixed crash produced by "export * from"
- Accepting React 17 as peerDependencies
- Fixed security warnings
- Migrated to material-ui 5
- Supports minimum React 17
- Supports minimum React 18
- Updated packages
- Updated packages