Merge pull request #1 from TangibleInc/tooltip-element

Tooltip element

assets/src/components/base/index.js

@@ -13,6 +13,8 @@ import RenderChoices from './list-box/RenderChoices'
 import Section from './list-box/Section'
 import Title from './title/Title'
 import Wrapper from './wrapper/Wrapper'
+import Tooltip from './tooltip/Tooltip'
+import TooltipTrigger from './tooltip/TooltipTrigger'
 
 export {
   Button,
@@ -29,5 +31,7 @@ export {
   RenderChoices,
   Section,
   Title,
-  Wrapper
+  Wrapper,
+  Tooltip,
+  TooltipTrigger
 }

assets/src/components/base/index.scss

@@ -6,4 +6,5 @@
 @import 'modal/index.scss';
 @import 'notice/index.scss';
 @import 'popover/index.scss';
-@import 'title/index.scss'
+@import 'title/index.scss';
+@import 'tooltip/index.scss';

assets/src/components/base/tooltip/Tooltip.jsx

@@ -0,0 +1,16 @@
+const Tooltip = props => {
+
+  const content = props.content ?? props.children
+  const placement = props.placement ?? 'top'
+  const theme = props.theme && props.theme === 'dark' ? 'dark' : 'light'
+
+  return (
+    <div className={`tf-tooltip tf-tooltip-${placement}`}>
+      <div className={`tf-tooltip-content tf-tooltip-content-${placement} ${theme}`}>
+        { content }
+      </div> 
+    </div>
+  )
+}
+
+export default Tooltip

assets/src/components/base/tooltip/TooltipTrigger.jsx

@@ -0,0 +1,29 @@
+import Tooltip from './Tooltip'
+import Button from '../button/Button'
+
+const TooltipTrigger = props => {
+
+  const layout = props.layout ?? 'button'
+  const label = props.label ?? 'Open tooltip'
+
+  return (
+    <div className='tf-tooltip-trigger'>
+      <div className='tf-tooltip-trigger-content'>
+        {
+          layout === 'button'
+            ? <Button
+                type="action"
+                isDisabled={ props.isDisabled }
+                { ...(props.buttonProps ?? {}) }
+              >
+                { label }
+              </Button>
+            : <span>{ label }</span>
+        }
+        <Tooltip { ...props }/>
+      </div>
+    </div>
+  )
+}
+
+export default TooltipTrigger

assets/src/components/base/tooltip/index.scss

@@ -0,0 +1,78 @@
+$tf-tooltip-bg-color: #e6e6e6;
+$tf-tooltip-color: #0e0d0df1;
+
+.tf-tooltip-trigger {
+  &-content{
+    position: relative;
+    width: fit-content;
+    cursor: context-menu;
+  }
+}
+
+.tf-tooltip{
+  z-index: 1;
+  position: absolute;
+  display: inline-block;
+  cursor: default;
+  visibility: hidden;
+  max-width: 150px;
+  width: max-content;  
+
+  &-top { bottom: 100%; left: 50%; margin-bottom: 12px; transform: translateX(-50%); }
+  &-bottom { top: 100%; left: 50%; margin-top: 12px; transform: translateX(-50%); }
+  &-start { top: 50%; right: 100%; margin-right: 12px; transform: translateY(-50%); }
+  &-end { top: 50%; left: 100%; margin-left: 12px; transform: translateY(-50%); }
+
+  &-content{
+    font-size: 12px;
+    text-align: center;
+    padding: 6px 12px;
+    border-radius: 3px;
+    word-break: normal;
+
+    &.light{
+      color: $tf-tooltip-color;
+      background-color: $tf-tooltip-bg-color;
+      --tf-tooltip-after-color: #{$tf-tooltip-bg-color};
+    }
+
+    &.dark{
+      background-color: $tf-tooltip-color;
+      color: $tf-tooltip-bg-color;
+      --tf-tooltip-after-color: #{$tf-tooltip-color};
+    }
+
+    &::after{
+      content: " ";
+      position: absolute;
+      border-width: 7px;
+      border-style: solid;
+    }
+
+    &-top::after{
+      top: 100%; left: 50%; margin-left: -7px;
+      border-color: var(--tf-tooltip-after-color, transparent) transparent transparent transparent;
+    }
+
+    &-bottom::after{
+      bottom: 100%; left: 50%; margin-left: -7px;
+      border-color: transparent transparent var(--tf-tooltip-after-color, transparent) transparent;
+    }
+
+    &-start::after{
+      top: 50%; left: 100%; margin-top: -7px;
+      border-color: transparent transparent transparent var(--tf-tooltip-after-color, transparent);
+    }
+
+    &-end::after{
+      top: 50%; right: 100%; margin-top: -7px;
+      border-color: transparent var(--tf-tooltip-after-color, transparent) transparent transparent;
+    }
+
+  }
+
+}
+
+.tf-tooltip-trigger-content:hover .tf-tooltip {
+  visibility: visible;
+}

assets/src/types.js

@@ -1,90 +1,92 @@
-import Repeater from './components/repeater/Repeater'
-import ConditionalPanel from './components/conditional/ConditonalPanel'
-
-import {
-  Accordion,
-  AlignmentMatrix,
-  Border,
-  ButtonGroup,
-  Checkbox,
-  Code,
-  Color,
-  ComboBox,
-  Date,
-  Dimensions,
-  DynamicText,
-  Editor,
-  FieldGroup,
-  File,
-  Gradient,
-  Gallery,
-  InputHidden,
-  List,
-  Number,
-  Radio,
-  Select,
-  SimpleDimension,
-  Switch,
-  Text,
-  TextArea
-} from './components/field/'
-
-import {
-  Button,
-  Label,
-  Description,
-  ModalTrigger,
-  Wrapper
-} from './components/base'
-
-const controls = {
-  'accordion'         : Accordion,
-  'alignment-matrix'  : AlignmentMatrix,
-  'border'            : Border,
-  'button-group'      : ButtonGroup,
-  'checkbox'          : Checkbox,
-  'code'              : Code,
-  'color-picker'      : Color,
-  'conditional-panel' : ConditionalPanel,
-  'combo-box'         : ComboBox,
-  'date-picker'       : Date,
-  'dimensions'        : Dimensions,
-  'field-group'       : FieldGroup,
-  'file'              : File,
-  'gradient'          : Gradient,
-  'gallery'           : Gallery,
-  'list'              : List,
-  'hidden'            : InputHidden,
-  'number'            : Number,
-  'repeater'          : Repeater,
-  'radio'             : Radio,
-  'select'            : Select,
-  'simple-dimension'  : SimpleDimension,
-  'switch'            : Switch,
-  'text'              : Text,
-  'text-suggestion'   : DynamicText,
-  'wysiwyg'           : Editor,
-  'editor'            : Editor, // alias of wysiwyg
-  'textarea'          : TextArea
-}
-
-const elements = {
-  'button'            : Button,
-  'description'       : Description,
-  'label'             : Label,
-  'modal'             : ModalTrigger,
-  'wrapper'           : Wrapper
-}
-
-export default {
-  _types : {
-    control : controls,
-    element : elements
-  },
-  get(name, type = 'control') {
-    return this._types[ type ]?.[ name ] ?? false
-  },
-  add(name, Component, type = 'control') {
-    this._types[ type ][ name ] = Component
-  }
-}
+import Repeater from './components/repeater/Repeater'
+import ConditionalPanel from './components/conditional/ConditonalPanel'
+
+import {
+  Accordion,
+  AlignmentMatrix,
+  Border,
+  ButtonGroup,
+  Checkbox,
+  Code,
+  Color,
+  ComboBox,
+  Date,
+  Dimensions,
+  DynamicText,
+  Editor,
+  FieldGroup,
+  File,
+  Gradient,
+  Gallery,
+  InputHidden,
+  List,
+  Number,
+  Radio,
+  Select,
+  SimpleDimension,
+  Switch,
+  Text,
+  TextArea
+} from './components/field/'
+
+import {
+  Button,
+  Label,
+  Description,
+  ModalTrigger,
+  Wrapper,
+  TooltipTrigger,
+} from './components/base'
+
+const controls = {
+  'accordion'         : Accordion,
+  'alignment-matrix'  : AlignmentMatrix,
+  'border'            : Border,
+  'button-group'      : ButtonGroup,
+  'checkbox'          : Checkbox,
+  'code'              : Code,
+  'color-picker'      : Color,
+  'conditional-panel' : ConditionalPanel,
+  'combo-box'         : ComboBox,
+  'date-picker'       : Date,
+  'dimensions'        : Dimensions,
+  'field-group'       : FieldGroup,
+  'file'              : File,
+  'gradient'          : Gradient,
+  'gallery'           : Gallery,
+  'list'              : List,
+  'hidden'            : InputHidden,
+  'number'            : Number,
+  'repeater'          : Repeater,
+  'radio'             : Radio,
+  'select'            : Select,
+  'simple-dimension'  : SimpleDimension,
+  'switch'            : Switch,
+  'text'              : Text,
+  'text-suggestion'   : DynamicText,
+  'wysiwyg'           : Editor,
+  'editor'            : Editor, // alias of wysiwyg
+  'textarea'          : TextArea
+}
+
+const elements = {
+  'button'            : Button,
+  'description'       : Description,
+  'label'             : Label,
+  'modal'             : ModalTrigger,
+  'wrapper'           : Wrapper,
+  'tooltip'           : TooltipTrigger
+}
+
+export default {
+  _types : {
+    control : controls,
+    element : elements
+  },
+  get(name, type = 'control') {
+    return this._types[ type ]?.[ name ] ?? false
+  },
+  add(name, Component, type = 'control') {
+    this._types[ type ][ name ] = Component
+  }
+}

elements/index.php

@@ -94,11 +94,16 @@
     case 'modal':
       $args = $fields->format_value($args, 'cancel_text', 'cancelText');
       $args = $fields->format_value($args, 'confirm_text', 'confirmText');
+      $args = $fields->format_value($args, 'button_props', 'buttonProps');
       break;
-
+      
     case 'button':
       $args = $fields->format_value($args, 'button_type', 'buttonType');
       break;
+
+    case 'tooltip':
+      $args = $fields->format_value($args, 'button_props', 'buttonProps');
+      break;
   }
 
   return $args;