panel buttons tooltips

src/components/panels/DistanceBar.tsx

@@ -7,6 +7,7 @@ import Slider from 'rc-slider';
 import { bindActionCreators } from 'redux';
 import { setSpeed } from '$redux/user/actions';
 import { IRootState } from "$redux/user/reducer";
+import { Tooltip } from "$components/panels/Tooltip";
 
 interface Props extends IRootState {
   setSpeed: typeof setSpeed,
@@ -45,8 +46,9 @@ class Component extends React.PureComponent<Props, State> {
 
     return (
       <React.Fragment>
-        <div className="status-bar padded desktop-only pointer" onClick={this.toggleDialog}>
+        <div className="status-bar padded desktop-only pointer tooltip-container" onClick={this.toggleDialog}>
           {distance} км&nbsp;
+          <Tooltip position="top">Примерное время</Tooltip>
           <Icon icon="icon-cycle" size={32} />
           {
             <span>{toHours(estimated)}</span>

src/components/panels/EditorPanel.tsx

@@ -8,6 +8,7 @@ import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { setMode, startEditing, stopEditing, setLogo, takeAShot, keyPressed } from '$redux/user/actions';
 import { IRootState } from "$redux/user/reducer";
+import { Tooltip } from "$components/panels/Tooltip";
 
 interface Props extends IRootState {
   setMode: typeof setMode,
@@ -56,18 +57,21 @@ class Component extends React.PureComponent<Props, void> {
               className={classnames({ active: mode === MODES.ROUTER })}
               onClick={this.startRouterMode}
             >
+              <Tooltip>Автоматический маршрут</Tooltip>
               <Icon icon="icon-route-2" />
             </button>
             <button
               className={classnames({ active: mode === MODES.POLY })}
               onClick={this.startPolyMode}
             >
+              <Tooltip>Редактирование маршрута</Tooltip>
               <Icon icon="icon-poly-3" />
             </button>
             <button
               className={classnames({ active: (mode === MODES.STICKERS || mode === MODES.STICKERS_SELECT) })}
               onClick={this.startStickerMode}
             >
+              <Tooltip>Точки маршрута</Tooltip>
               <Icon icon="icon-sticker-3" />
             </button>
 
@@ -80,6 +84,7 @@ class Component extends React.PureComponent<Props, void> {
               className={classnames({ active: mode === MODES.TRASH })}
               onClick={this.startTrashMode}
             >
+              <Tooltip>Удаление элементов</Tooltip>
               <Icon icon="icon-trash-4" />
             </button>
           </div>

src/components/panels/Tooltip.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import classnames from 'classnames';
+
+export const Tooltip = ({ children, position = 'bottom' }: { children: string, position?: string }) => (
+  <div className={classnames('panel-tooltip', { top: position === 'top' })}>
+    {children}
+  </div>
+);

src/components/panels/TopLeftPanel.tsx

@@ -2,6 +2,7 @@
 import * as React from 'react';
 import { UserLocation } from '$components/UserLocation';
 import { DistanceBar } from '$components/panels/DistanceBar';
+import { Tooltip } from "$components/panels/Tooltip";
 
 export const TopLeftPanel = () => (
   <div className="status-panel top left">

src/components/panels/TopRightPanel.tsx

@@ -8,6 +8,8 @@ import { connect } from 'react-redux';
 import { MODES } from '$constants/modes';
 import { IRootState } from "$redux/user/reducer";
 
+import { Tooltip } from "$components/panels/Tooltip";
+
 interface Props extends IRootState {
   startProviderMode: () => void,
   startLogoMode: () => void,
@@ -20,18 +22,20 @@ const Component = ({
   <div className="status-panel top right">
     {
       editing && !markers_shown &&
-      <div className="status-bar pointer top-control padded warning icon-only">
+      <div className="status-bar pointer top-control padded warning icon-only tooltip-container">
         <Icon icon="icon-eye-1" size={24} />
-        <div className="status-bar-tip">Приблизьте, чтобы редактировать кривую</div>
+        <Tooltip position="top">Приблизьте, чтобы редактировать кривую</Tooltip>
       </div>
     }
-    <div className="status-bar pointer top-control padded" onFocus={startProviderMode} onBlur={clearMode} tabIndex={-1}>
+    <div className="status-bar pointer top-control padded tooltip-container" onFocus={startProviderMode} onBlur={clearMode} tabIndex={-1}>
+      <Tooltip position="top">Стиль карты</Tooltip>
       <Icon icon="icon-map-1" size={24} />
       <div className="status-bar-sep" />
       <span>{(provider && PROVIDERS[provider] && PROVIDERS[provider].name) || '...'}</span>
     </div>
 
-    <div className="status-bar pointer top-control padded" onFocus={startLogoMode} onBlur={clearMode} tabIndex={-1}>
+    <div className="status-bar pointer top-control padded tooltip-container" onFocus={startLogoMode} onBlur={clearMode} tabIndex={-1}>
+      <Tooltip position="top">Логотип</Tooltip>
       <Icon icon="icon-logo-3" size={24} />
       <div className="status-bar-sep" />
       <span>{(logo && LOGOS[logo] && LOGOS[logo][0]) || '...'}</span>

src/components/panels/UserPanel.tsx

@@ -13,6 +13,7 @@ import classnames from 'classnames';
 import { CLIENT } from '$config/frontend';
 import { DIALOGS } from '$constants/dialogs';
 import { IRootState } from "$redux/user/reducer";
+import { Tooltip } from "$components/panels/Tooltip";
 
 interface Props extends IRootState {
   is_empty: boolean,
@@ -121,6 +122,7 @@ export class Component extends React.PureComponent<Props, State> {
               })}
               onClick={this.openMapsDialog}
             >
+              <Tooltip>Каталог маршрутов</Tooltip>
               <Icon icon="icon-folder-1" />
             </button>
           </div>
@@ -132,6 +134,7 @@ export class Component extends React.PureComponent<Props, State> {
               className={classnames({ active: false })}
               onClick={this.props.takeAShot}
             >
+              <Tooltip>Снимок карты</Tooltip>
               <Icon icon="icon-shot-4" />
             </button>
           </div>
@@ -145,6 +148,7 @@ export class Component extends React.PureComponent<Props, State> {
                     className={classnames({ active: false })}
                     onClick={this.props.getGPXTrack}
                   >
+                    <Tooltip>Экспорт GPX</Tooltip>
                     <Icon icon="icon-gpx-1" />
                   </button>
                 </div>

src/index.tsx

@@ -14,17 +14,10 @@
   todo hide arrows on small zooms
   todo selecting logo on crop
 
-  todo tooltips for panel items
-
   done public maps
     todo editing map on map list
     todo setting map public on map list
 
-  done map catalogue
-    done public maps
-    done map search
-    done map list lazy loading
-
   todo network operations notify
     done delayed notify (delay(2000).then(showLoadingMsg))
     todo network error notifications
@@ -36,6 +29,12 @@
 
   ## DONE
 
+  done tooltips for panel items
+  done map catalogue
+    done public maps
+    done map search
+    done map list lazy loading
+
   done save spinner
   done better poly editor https://github.com/SupriyaSudhindra/leaflet-editable-polyline
     done update after point delete

src/styles/colors.less

@@ -26,3 +26,5 @@
 
 @mobile_breakpoint: 768px;
 @micro_breakpoint: 390px;
+
+@tooltip_backgroud: #123740;

src/styles/panel.less

@@ -143,6 +143,51 @@
   }
 }
 
+.panel-tooltip {
+  position: absolute;
+  bottom: 58px;
+  left: 50%;
+  background: @tooltip_backgroud;
+  padding: 10px;
+  transform: translateX(-50%);
+  border-radius: @panel_radius;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 250ms;
+  font-size: 13px;
+  color: white;
+
+  &::after {
+    content: ' ';
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    background: @tooltip_backgroud;
+    bottom: 0;
+    transform: translate(-50%, 5px) rotate(45deg);
+    left: 50%;
+  }
+
+  &.top {
+    bottom: auto;
+    top: 43px;
+
+    &::after {
+      bottom: auto;
+      top: 0;
+      transform: translate(-50%, -5px) rotate(45deg);
+    }
+  }
+}
+
+.panel button, .tooltip-container {
+  position: relative;
+
+  &:hover .panel-tooltip {
+    opacity: 1;
+  }
+}
+
 .control-bar-counter {
   color: white;
   min-width: 12px;