Pop over component that appears to the left/top/right/bottom of a button on user click. The dynamic part of them is made using Nextjs and the styles are done using Tailwind CSS.
For this component to properly work, you will need to install popper.js into your project. Please run the following:
npm i -E @popperjs/[email protected]
Examples
Left
left blueGray
blueGray popover title
And here's some amazing content. It's very engaging. Right?
left red
red popover title
And here's some amazing content. It's very engaging. Right?
left orange
orange popover title
And here's some amazing content. It's very engaging. Right?
left amber
amber popover title
And here's some amazing content. It's very engaging. Right?
left emerald
emerald popover title
And here's some amazing content. It's very engaging. Right?
left teal
teal popover title
And here's some amazing content. It's very engaging. Right?
left lightBlue
lightBlue popover title
And here's some amazing content. It's very engaging. Right?
left indigo
indigo popover title
And here's some amazing content. It's very engaging. Right?
left purple
purple popover title
And here's some amazing content. It's very engaging. Right?
left pink
pink popover title
And here's some amazing content. It's very engaging. Right?
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " left "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-blueGray-500 text-white active:bg-blueGray-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
left blueGray
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-blueGray-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-blueGray-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
blueGray popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " left "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-red-500 text-white active:bg-red-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
left red
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-red-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-red-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
red popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " left "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-orange-500 text-white active:bg-orange-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
left orange
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-orange-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-orange-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
orange popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " left "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-amber-500 text-white active:bg-amber-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
left amber
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-amber-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-amber-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
amber popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " left "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-emerald-500 text-white active:bg-emerald-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
left emerald
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-emerald-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-emerald-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
emerald popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " left "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-teal-500 text-white active:bg-teal-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
left teal
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-teal-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-teal-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
teal popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " left "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-lightBlue-500 text-white active:bg-lightBlue-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
left lightBlue
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-lightBlue-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-lightBlue-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
lightBlue popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " left "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-indigo-500 text-white active:bg-indigo-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
left indigo
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-indigo-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-indigo-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
indigo popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " left "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-purple-500 text-white active:bg-purple-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
left purple
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-purple-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-purple-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
purple popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " left "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-pink-500 text-white active:bg-pink-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
left pink
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-pink-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-pink-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
pink popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
Top
top blueGray
blueGray popover title
And here's some amazing content. It's very engaging. Right?
top red
red popover title
And here's some amazing content. It's very engaging. Right?
top orange
orange popover title
And here's some amazing content. It's very engaging. Right?
top amber
amber popover title
And here's some amazing content. It's very engaging. Right?
top emerald
emerald popover title
And here's some amazing content. It's very engaging. Right?
top teal
teal popover title
And here's some amazing content. It's very engaging. Right?
top lightBlue
lightBlue popover title
And here's some amazing content. It's very engaging. Right?
top indigo
indigo popover title
And here's some amazing content. It's very engaging. Right?
top purple
purple popover title
And here's some amazing content. It's very engaging. Right?
top pink
pink popover title
And here's some amazing content. It's very engaging. Right?
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " top "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-blueGray-500 text-white active:bg-blueGray-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
top blueGray
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-blueGray-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-blueGray-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
blueGray popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " top "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-red-500 text-white active:bg-red-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
top red
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-red-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-red-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
red popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " top "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-orange-500 text-white active:bg-orange-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
top orange
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-orange-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-orange-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
orange popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " top "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-amber-500 text-white active:bg-amber-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
top amber
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-amber-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-amber-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
amber popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " top "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-emerald-500 text-white active:bg-emerald-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
top emerald
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-emerald-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-emerald-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
emerald popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " top "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-teal-500 text-white active:bg-teal-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
top teal
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-teal-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-teal-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
teal popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " top "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-lightBlue-500 text-white active:bg-lightBlue-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
top lightBlue
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-lightBlue-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-lightBlue-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
lightBlue popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " top "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-indigo-500 text-white active:bg-indigo-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
top indigo
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-indigo-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-indigo-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
indigo popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " top "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-purple-500 text-white active:bg-purple-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
top purple
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-purple-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-purple-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
purple popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " top "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-pink-500 text-white active:bg-pink-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
top pink
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-pink-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-pink-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
pink popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
Right
right blueGray
blueGray popover title
And here's some amazing content. It's very engaging. Right?
right red
red popover title
And here's some amazing content. It's very engaging. Right?
right orange
orange popover title
And here's some amazing content. It's very engaging. Right?
right amber
amber popover title
And here's some amazing content. It's very engaging. Right?
right emerald
emerald popover title
And here's some amazing content. It's very engaging. Right?
right teal
teal popover title
And here's some amazing content. It's very engaging. Right?
right lightBlue
lightBlue popover title
And here's some amazing content. It's very engaging. Right?
right indigo
indigo popover title
And here's some amazing content. It's very engaging. Right?
right purple
purple popover title
And here's some amazing content. It's very engaging. Right?
right pink
pink popover title
And here's some amazing content. It's very engaging. Right?
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " right "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-blueGray-500 text-white active:bg-blueGray-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
right blueGray
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-blueGray-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-blueGray-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
blueGray popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " right "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-red-500 text-white active:bg-red-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
right red
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-red-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-red-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
red popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " right "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-orange-500 text-white active:bg-orange-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
right orange
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-orange-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-orange-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
orange popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " right "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-amber-500 text-white active:bg-amber-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
right amber
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-amber-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-amber-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
amber popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " right "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-emerald-500 text-white active:bg-emerald-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
right emerald
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-emerald-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-emerald-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
emerald popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " right "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-teal-500 text-white active:bg-teal-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
right teal
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-teal-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-teal-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
teal popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " right "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-lightBlue-500 text-white active:bg-lightBlue-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
right lightBlue
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-lightBlue-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-lightBlue-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
lightBlue popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " right "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-indigo-500 text-white active:bg-indigo-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
right indigo
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-indigo-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-indigo-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
indigo popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " right "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-purple-500 text-white active:bg-purple-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
right purple
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-purple-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-purple-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
purple popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " right "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-pink-500 text-white active:bg-pink-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
right pink
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-pink-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-pink-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
pink popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
Bottom
bottom blueGray
blueGray popover title
And here's some amazing content. It's very engaging. Right?
bottom red
red popover title
And here's some amazing content. It's very engaging. Right?
bottom orange
orange popover title
And here's some amazing content. It's very engaging. Right?
bottom amber
amber popover title
And here's some amazing content. It's very engaging. Right?
bottom emerald
emerald popover title
And here's some amazing content. It's very engaging. Right?
bottom teal
teal popover title
And here's some amazing content. It's very engaging. Right?
bottom lightBlue
lightBlue popover title
And here's some amazing content. It's very engaging. Right?
bottom indigo
indigo popover title
And here's some amazing content. It's very engaging. Right?
bottom purple
purple popover title
And here's some amazing content. It's very engaging. Right?
bottom pink
pink popover title
And here's some amazing content. It's very engaging. Right?
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " bottom "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-blueGray-500 text-white active:bg-blueGray-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
bottom blueGray
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-blueGray-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-blueGray-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
blueGray popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " bottom "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-red-500 text-white active:bg-red-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
bottom red
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-red-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-red-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
red popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " bottom "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-orange-500 text-white active:bg-orange-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
bottom orange
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-orange-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-orange-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
orange popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " bottom "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-amber-500 text-white active:bg-amber-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
bottom amber
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-amber-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-amber-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
amber popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " bottom "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-emerald-500 text-white active:bg-emerald-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
bottom emerald
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-emerald-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-emerald-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
emerald popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " bottom "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-teal-500 text-white active:bg-teal-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
bottom teal
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-teal-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-teal-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
teal popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " bottom "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-lightBlue-500 text-white active:bg-lightBlue-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
bottom lightBlue
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-lightBlue-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-lightBlue-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
lightBlue popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " bottom "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-indigo-500 text-white active:bg-indigo-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
bottom indigo
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-indigo-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-indigo-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
indigo popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " bottom "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-purple-500 text-white active:bg-purple-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
bottom purple
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-purple-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-purple-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
purple popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
import React from " react " ;
import { createPopper } from " @popperjs/core " ;
const Popover = () => {
const [ popoverShow , setPopoverShow ] = React . useState ( false );
const btnRef = React . createRef ();
const popoverRef = React . createRef ();
const openPopover = () => {
createPopper ( btnRef . current , popoverRef . current , {
placement : " bottom "
});
setPopoverShow ( true );
};
const closePopover = () => {
setPopoverShow ( false );
};
return (
<>
< div className = " flex flex-wrap " >
< div className = " w-full text-center " >
< button
className = " bg-pink-500 text-white active:bg-pink-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150 " type = " button "
onClick = {() => {
popoverShow ? closePopover () : openPopover ();
}}
ref = { btnRef }
>
bottom pink
< /button >
< div
className = {
( popoverShow ? "" : " hidden " ) +
" bg-pink-600 border-0 mr-3 block z-50 font-normal leading-normal text-sm max-w-xs text-left no-underline break-words rounded-lg "
}
ref = { popoverRef }
>
< div >
< div
className = " bg-pink-600 text-white opacity-75 font-semibold p-3 mb-0 border-b border-solid border-blueGray-100 uppercase rounded-t-lg "
>
pink popover title
< /div >
< div className = " text-white p-3 " >
And here ' s some amazing content. It ' s very engaging . Right ?
< /div >
< /div >
< /div >
< /div >
< /div >
< / >
);
};
export default Popover ;
Props
Please check the official PopperJS Documentation
You can also check the Official PopperJS Github Repository