1 files changed, 95 insertions, 0 deletions
diff --git a/front/odiparpack/app/containers/UiElements/PopoverTooltip.js b/front/odiparpack/app/containers/UiElements/PopoverTooltip.js
new file mode 100644
index 0000000..508129b
--- /dev/null
+++ b/front/odiparpack/app/containers/UiElements/PopoverTooltip.js
@@ -0,0 +1,95 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { SourceReader, PapperBlock } from 'ba-components';
+import { Grid } from '@material-ui/core';
+import {
+  SimpleTooltips,
+  PositionedTooltips,
+  SimplePopover,
+  PopoverPlayground,
+  DelayTooltips,
+  TransitionsTooltips,
+  TriggersTooltips,
+  CustomizedTooltips
+} from './demos';
+
+class PopoverTooltip extends React.Component {
+  render() {
+    const title = brand.name + ' - UI Elements';
+    const description = brand.desc;
+    const docSrc = 'containers/UiElements/demos/PopoverTooltip/';
+    return (
+      <div>
+        <Helmet>
+          <title>{title}</title>
+          <meta name="description" content={description} />
+          <meta property="og:title" content={title} />
+          <meta property="og:description" content={description} />
+          <meta property="twitter:title" content={title} />
+          <meta property="twitter:description" content={description} />
+        </Helmet>
+        <PapperBlock title="Simple Tooltips" desc="The tooltips are text labels that appear when the user hovers over, focuses on, or touches an element.">
+          <div>
+            <SimpleTooltips />
+            <SourceReader componentName={docSrc + 'SimpleTooltips.js'} />
+          </div>
+        </PapperBlock>
+        <PapperBlock overflowX title="Positioned Tooltips" desc="The Tooltip has 12 placements choice. They don’t have directional arrows; instead, they rely on motion emanating from the source to convey direction.">
+          <div>
+            <PositionedTooltips />
+            <SourceReader componentName={docSrc + 'PositionedTooltips.js'} />
+          </div>
+        </PapperBlock>
+        <Grid container spacing={2}>
+          <Grid item md={6} xs={12}>
+            <PapperBlock title="Triggers Tooltips" desc="You can define the types of events that cause a tooltip to show.">
+              <div>
+                <TriggersTooltips />
+                <SourceReader componentName={docSrc + 'TriggersTooltips.js'} />
+              </div>
+            </PapperBlock>
+          </Grid>
+          <Grid item md={6} xs={12}>
+            <PapperBlock title="Delay Tooltip" desc="A delay in showing or hiding the tooltip can be added also">
+              <div>
+                <DelayTooltips />
+                <SourceReader componentName={docSrc + 'DelayTooltips.js'} />
+              </div>
+            </PapperBlock>
+          </Grid>
+          <Grid item md={6} xs={12}>
+            <PapperBlock title="Transitions Tooltips" desc="Tooltips with different transition.">
+              <div>
+                <TransitionsTooltips />
+                <SourceReader componentName={docSrc + 'TransitionsTooltips.js'} />
+              </div>
+            </PapperBlock>
+          </Grid>
+          <Grid item md={6} xs={12}>
+            <PapperBlock title="Customized Tooltips" desc="The tooltip with customized css style">
+              <div>
+                <CustomizedTooltips />
+                <SourceReader componentName={docSrc + 'CustomizedTooltips.js'} />
+              </div>
+            </PapperBlock>
+          </Grid>
+        </Grid>
+        <PapperBlock title="Simple Popover" desc="A Popover can be used to display some content on top of another.">
+          <div>
+            <SimplePopover />
+            <SourceReader componentName={docSrc + 'SimplePopover.js'} />
+          </div>
+        </PapperBlock>
+        <PapperBlock title="Popover playground" desc="Use the radio buttons to adjust the anchorOrigin and transformOrigin positions. You can also set the anchorReference to anchorPosition or anchorEl.">
+          <div>
+            <PopoverPlayground />
+            <SourceReader componentName={docSrc + 'PopoverPlayground.js'} />
+          </div>
+        </PapperBlock>
+      </div>
+    );
+  }
+}
+
+export default PopoverTooltip;