added button tooltips

src/components/comment/CommentForm/styles.module.scss

@@ -19,6 +19,8 @@
 .buttons {
   @include outer_shadow();
 
+  position: relative;
+  z-index: 1;
   display: flex;
   flex-direction: row;
   background: transparentize(black, 0.8);

src/components/comment/CommentFormFormatButtons/index.tsx

@@ -24,6 +24,7 @@ const CommentFormFormatButtons: FC<IProps> = ({ element, handler }) => {
         color="gray"
         iconOnly
         type="button"
+        label="Жирный"
       />
 
       <Button
@@ -33,6 +34,7 @@ const CommentFormFormatButtons: FC<IProps> = ({ element, handler }) => {
         color="gray"
         iconOnly
         type="button"
+        label="Наклонный"
       />
 
       <Button
@@ -42,6 +44,7 @@ const CommentFormFormatButtons: FC<IProps> = ({ element, handler }) => {
         color="gray"
         iconOnly
         type="button"
+        label="Заголовок"
       />
 
       <Button
@@ -51,7 +54,19 @@ const CommentFormFormatButtons: FC<IProps> = ({ element, handler }) => {
         color="gray"
         iconOnly
         type="button"
+        label="Ссылка"
       />
+
+      <Button
+        onClick={wrap('// ')}
+        size="small"
+        color="gray"
+        iconOnly
+        type="button"
+        label="Коммент"
+      >
+        {`/ /`}
+      </Button>
     </ButtonGroup>
   );
 };

src/components/comment/CommentFormFormatButtons/styles.module.scss

@@ -4,5 +4,4 @@
   display: flex;
   flex-wrap: wrap;
   height: 32px;
-  overflow: hidden;
 }

src/components/input/Button/index.tsx

@@ -1,8 +1,16 @@
 import classnames from 'classnames';
-import React, { ButtonHTMLAttributes, DetailedHTMLProps, FC, createElement, memo } from 'react';
+import React, {
+  ButtonHTMLAttributes,
+  DetailedHTMLProps,
+  FC,
+  createElement,
+  memo,
+  useRef,
+} from 'react';
 import styles from './styles.module.scss';
 import { Icon } from '~/components/input/Icon';
 import { IIcon } from '~/redux/types';
+import { usePopper } from 'react-popper';
 
 type IButtonProps = DetailedHTMLProps<
   ButtonHTMLAttributes<HTMLButtonElement>,
@@ -19,6 +27,7 @@ type IButtonProps = DetailedHTMLProps<
   is_loading?: boolean;
   stretchy?: boolean;
   iconOnly?: boolean;
+  label?: string;
 };
 
 const Button: FC<IButtonProps> = memo(
@@ -37,9 +46,24 @@ const Button: FC<IButtonProps> = memo(
     stretchy,
     disabled,
     iconOnly,
+    label,
+    ref,
     ...props
-  }) =>
+  }) => {
-    createElement(
+    const tooltip = useRef<HTMLSpanElement>();
+    const pop = usePopper(tooltip?.current?.parentElement, tooltip.current, {
+      placement: 'top',
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 5],
+          },
+        },
+      ],
+    });
+
+    return createElement(
       seamless || non_submitting ? 'div' : 'button',
       {
         className: classnames(styles.button, className, styles[size], styles[color], {
@@ -58,8 +82,19 @@ const Button: FC<IButtonProps> = memo(
         iconLeft && <Icon icon={iconLeft} size={20} key={0} className={styles.icon_left} />,
         title ? <span>{title}</span> : children || null,
         iconRight && <Icon icon={iconRight} size={20} key={2} className={styles.icon_right} />,
+        !!label && (
+          <span
+            ref={tooltip}
+            className={styles.tooltip}
+            style={pop.styles.popper}
+            {...pop.attributes.popper}
+          >
+            {label}
+          </span>
+        ),
       ]
-    )
+    );
+  }
 );
 
 export { Button };

src/components/input/Button/styles.module.scss

@@ -10,6 +10,7 @@
 }
 
 .button {
+  position: relative;
   height: $input_height;
   border: none;
   box-sizing: border-box;
@@ -235,3 +236,21 @@
   width: 20px;
   height: 20px;
 }
+
+.tooltip {
+  padding: 5px 10px;
+  background-color: darken($content_bg, 4%);
+  z-index: 2;
+  border-radius: $input_radius;
+  text-transform: none;
+  opacity: 0;
+  pointer-events: none;
+  touch-action: none;
+  transition: opacity 0.1s;
+  border: 1px solid transparentize(white, 0.9);
+
+  .button:hover & {
+    opacity: 1;
+    font: $font_14_semibold;
+  }
+}