@upendradevsingh/webcore/docs/src/components/Popover/Popover.js

UI Core Components for web

import React from 'react';
import Popover from '../../../../src/Popover/Popover';

export default class PopoverShowCase extends React.Component{
    render(){
        return(
            <div>
                <Popover 
                    targetClass="btn"
                    inline={true}
                    placement={"right"}
                    targetText="I am Popover - Right">
                    <p> I am Popover Content </p>
                    <p> I am Popover Content </p>
                    <p> I am Popover Content </p>
                </Popover>
                <Popover 
                    targetClass="btn"
                    inline={true}
                    placement={"left"}
                    targetText="I am Popover - Left">
                    <p> I am Popover Content </p>
                    <p> I am Popover Content </p>
                    <p> I am Popover Content </p>
                </Popover>
                <Popover 
                    targetClass="btn"
                    inline={true}
                    placement={"top"}
                    targetText="I am Popover - Top">
                        <p> I am Popover Content </p>
                        <p> I am Popover Content </p>
                        <p> I am Popover Content </p>
                </Popover>
                <PopoverCode />
            </div>
        );
    }
}

const PopoverCode = () => {
    return(
        <pre>
{
    `
export default class PopoverShowCase extends React.Component{
    render(){
        return(
            <div>
                <Popover 
                    targetClass="btn"
                    inline={true}
                    placement={"right"}
                    targetText="I am Popover - Right">
                    <p> I am Popover Content </p>
                    <p> I am Popover Content </p>
                    <p> I am Popover Content </p>
                </Popover>
                <Popover 
                    targetClass="btn"
                    inline={true}
                    placement={"left"}
                    targetText="I am Popover - Left">
                    <p> I am Popover Content </p>
                    <p> I am Popover Content </p>
                    <p> I am Popover Content </p>
                </Popover>
                <Popover 
                    targetClass="btn"
                    inline={true}
                    placement={"top"}
                    targetText="I am Popover - Top">
                        <p> I am Popover Content </p>
                        <p> I am Popover Content </p>
                        <p> I am Popover Content </p>
                </Popover>
            </div>
        );
    }
}
    `
}            
        </pre>
    );
}