Frontend

Hello everyone, in this tutorial we are going to create 'Tooltip' component for React , but we will not use any external library, so that you get the flexibility to customise it according to your project need. So Let's start. First Let's see have a look of the final outcome : So we will start by initiating a project with create-react-app. And within src folder we will create a Tooltip.js file, Tooltip component will allow user to pass tooltip text. import React from 'react' import './style.css' const Tooltip = ({text}) => { return ( < div style = {{ textAlign : 'center' , margin : '10%' }} > < div class = "custom-tooltip" > Hover to see tooltip < span class = "custom-tooltip-text" > {text} < /span> < /div> < span style = {{ display : 'block' ...

Let's take a quick look at final output : Modal.js File , which contains modal view and its content along with a close button import React from 'react' import './style.css' const Modal = ({open,close,modalText}) =>{ const classModal = open ? "modal--open" : "modal--close" return ( <div className={classModal}> <div className= "modal" > <span className= "close" onClick={close}>X< /span> <span className= "modalText" >{modalText}< /span> < /div> < /div> ) } export default Modal style.css file used in above file .modal { padding : 12px; background : blue; width : 320px; text-align : center ; } @keyframes fadeIn { from { opacity : 0; } to { opacity : 1; } } @keyframes fadeOut { from { opacity : 1; } to { opacity : 0; } } ....