@axa-fr/react-toolkit-popover
- Installation
- Popover
- PopoverBase
npm i @axa-fr/react-toolkit-popover
import Popover from '@axa-fr/react-toolkit-popover';
import '@axa-fr/react-toolkit-popover/dist/af-popover.css';
const PopoverDefault = () => (
<Popover mode="hover">
<Popover.Pop>
<p>Modal content</p>
</Popover.Pop>
<Popover.Over>
<button>Source</button>
</Popover.Over>
</Popover>
);
export default PopoverDefault;
import { PopoverBase, PopoverPlacements } from '@axa-fr/react-toolkit-popover';
import '@axa-fr/react-toolkit-popover/dist/af-popover.css';
import '@axa-fr/react-toolkit-popover/dist/af-help-custom.css';
const PopoverBaseReturn = () => (
<PopoverBase
classModifier="custom"
isOpen={true}
placement={PopoverPlacements.right}>
<PopoverBase.Pop>
<div className="af-help-demo__container">
<h3 className="af-help-demo__title">Profile</h3>
<div className="af-help-demo__infos">
<p className="af-help-demo__info">
<span className="af-help-demo__info-title">Tweets</span>
<span className="af-help-demo__info-number">1,337</span>
</p>
<p className="af-help-demo__info">
<span className="af-help-demo__info-title">Following</span>
<span className="af-help-demo__info-number">561</span>
</p>
<p className="af-help-demo__info">
<span className="af-help-demo__info-title">Followers</span>
<span className="af-help-demo__info-number">718</span>
</p>
</div>
</div>
</PopoverBase.Pop>
<PopoverBase.Over>
<button type="button" id="idbouton">
Bouton d'exemple
</button>
</PopoverBase.Over>
</PopoverBase>
);
export default PopoverBaseReturn;