add tooltip

src/client/js/components/Navbar/ThreeStrandedButton.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
+import { UncontrolledTooltip } from 'reactstrap';
 
 const ThreeStrandedButton = (props) => {
   const { t, isBtnDisabled } = props;
@@ -14,35 +15,52 @@ const ThreeStrandedButton = (props) => {
   }
 
   return (
-    <div className="btn-group grw-three-stranded-button" role="group " aria-label="three-stranded-button">
-      <button
-        type="button"
-        className={`btn btn-outline-primary view-button ${btnActive === 'view' && 'active'}`}
-        onClick={() => { threeStrandedButtonClickedHandler('view') }}
-        disabled={isBtnDisabled}
+    <>
+      <div
+        className="btn-group grw-three-stranded-button"
+        role="group"
+        aria-label="three-stranded-button"
+        id="test"
       >
-        <i className="icon-control-play icon-fw" />
-        { t('view') }
-      </button>
-      <button
-        type="button"
-        className={`btn btn-outline-primary edit-button ${btnActive === 'edit' && 'active'}`}
-        onClick={(e) => { threeStrandedButtonClickedHandler('edit') }}
-        disabled={isBtnDisabled}
-      >
-        <i className="icon-note icon-fw" />
-        { t('Edit') }
-      </button>
-      <button
-        type="button"
-        className={`btn btn-outline-primary hackmd-button ${btnActive === 'hackmd' && 'active'}`}
-        onClick={() => { threeStrandedButtonClickedHandler('hackmd') }}
-        disabled={isBtnDisabled}
-      >
-        <i className="fa fa-fw fa-file-text-o" />
-        { t('hackmd.hack_md') }
-      </button>
-    </div>
+        <button
+          data-container="body"
+          type="button"
+          className={`btn btn-outline-primary view-button ${btnActive === 'view' && 'active'}`}
+          onClick={() => { threeStrandedButtonClickedHandler('view') }}
+          disabled={isBtnDisabled}
+        >
+          <i className="icon-control-play icon-fw" />
+          <span>
+            { t('view') }
+          </span>
+        </button>
+        <button
+          type="button"
+          className={`btn btn-outline-primary edit-button ${btnActive === 'edit' && 'active'}`}
+          onClick={(e) => { threeStrandedButtonClickedHandler('edit') }}
+          disabled={isBtnDisabled}
+        >
+          <i className="icon-note icon-fw" />
+          <span>
+            { t('Edit') }
+          </span>
+        </button>
+        <button
+          type="button"
+          className={`btn btn-outline-primary hackmd-button ${btnActive === 'hackmd' && 'active'}`}
+          onClick={() => { threeStrandedButtonClickedHandler('hackmd') }}
+          disabled={isBtnDisabled}
+        >
+          <i className="fa fa-fw fa-file-text-o" />
+          <span>
+            { t('hackmd.hack_md') }
+          </span>
+        </button>
+      </div>
+      <UncontrolledTooltip placement="top" target="test" delay={0} fade={false}>
+        {t('Not available for guest')}
+      </UncontrolledTooltip>
+    </>
   );
 
 };