Oleksandr Demian Posted on Jun 26, 2020 4 React tooltip #react #javascript #tooltip #css import React from "react"; import styled from "styled-components"; const TooltipContainer = styled.span` position: relative; &:hover > .tip { display: block; } & > .tip { display: none; position: absolute; background: #1F2531; opacity: 0.9; border-radius: 5px; color: #FFFFFF; padding: 12px 8px; width: 100%; min-width: 100px; } & > .tip::after { content: ""; position: absolute; opacity: 0.9; top: -10px; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent black transparent; } `; const Tooltip = ({children, tip}) => { return <TooltipContainer> {children} <span className="tip">{tip}</span> </TooltipContainer> }; export default Tooltip; Enter fullscreen mode Exit fullscreen mode Usage: <Tooltip tip="I'm a tooltip"> <p>Example paragraph</p> </Tooltip> Enter fullscreen mode Exit fullscreen mode Top comments (0) Subscribe Personal Trusted User Create template Templates let you quickly answer FAQs or store snippets for re-use. Submit Preview Dismiss Code of Conduct • Report abuse Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse
Top comments (0)