Adding support for tooltips on buttons

Author: andrerpena

src/ReactMde.js

@@ -35,11 +35,19 @@ const HeaderGroup = (props) => (
     </ul>
 );
 
-const HeaderItem = ({icon, onClick}) => {
+const HeaderItem = ({icon, onClick, tooltip}) => {
     var x = React.isValidElement(icon) ? icon : <i className={`fa fa-${icon}`} aria-hidden="true"></i>
+
+    let buttonProps = {};
+    if(tooltip) {
+        buttonProps = {
+            'aria-label': tooltip,
+            className: 'tooltipped'
+        }
+    }
     return (
         <li className="mde-header-item">
-            <button type="button" onClick={onClick}>
+            <button type="button" {...buttonProps} onClick={onClick}>
                 {x}
             </button>
         </li>
@@ -117,17 +125,17 @@ class ReactMde extends Component {
             <div className="react-mde">
                 <div className="mde-header">
                     <HeaderGroup>
-                        <HeaderItem icon="bold" onClick={this.getCommandHandler(ReactMdeCommands.makeBold).bind(this)} />
-                        <HeaderItem icon="italic" onClick={this.getCommandHandler(ReactMdeCommands.makeItalic).bind(this)} />
+                        <HeaderItem icon="bold" tooltip="Add bold text" onClick={this.getCommandHandler(ReactMdeCommands.makeBold).bind(this)} />
+                        <HeaderItem icon="italic" tooltip="Add italic text" onClick={this.getCommandHandler(ReactMdeCommands.makeItalic).bind(this)} />
                     </HeaderGroup>
                     <HeaderGroup>
-                        <HeaderItem icon="link" onClick={this.getCommandHandler(ReactMdeCommands.makeLink).bind(this)} />
-                        <HeaderItem icon="quote-right" onClick={this.getCommandHandler(ReactMdeCommands.makeQuote).bind(this)} />
-                        <HeaderItem icon="picture-o" onClick={this.getCommandHandler(ReactMdeCommands.makeImage).bind(this)} />
+                        <HeaderItem icon="link" tooltip="Insert a link" onClick={this.getCommandHandler(ReactMdeCommands.makeLink).bind(this)} />
+                        <HeaderItem icon="quote-right" tooltip="Insert a quote" onClick={this.getCommandHandler(ReactMdeCommands.makeQuote).bind(this)} />
+                        <HeaderItem icon="picture-o" tooltip="Insert a picture" onClick={this.getCommandHandler(ReactMdeCommands.makeImage).bind(this)} />
                     </HeaderGroup>
                     <HeaderGroup>
-                        <HeaderItem icon="list-ul" onClick={this.getCommandHandler(ReactMdeCommands.makeUnorderedList).bind(this)} />
-                        <HeaderItem icon="list-ol" onClick={this.getCommandHandler(ReactMdeCommands.makeOrderedList).bind(this)} />
+                        <HeaderItem icon="list-ul" tooltip="Add a bulleted list" onClick={this.getCommandHandler(ReactMdeCommands.makeUnorderedList).bind(this)} />
+                        <HeaderItem icon="list-ol" tooltip="Add a numbered list" onClick={this.getCommandHandler(ReactMdeCommands.makeOrderedList).bind(this)} />
                     </HeaderGroup>
                 </div>
                 <div className="mde-text">

src/styles/react-mde.scss

@@ -11,6 +11,7 @@
             list-style: none;
             li.mde-header-item {
                 display: inline-block;
+                position: relative;
                 margin: 0 0.25rem;
                 button {
                     cursor: pointer;
@@ -21,6 +22,57 @@
                     .fa {
                         color: $mde-button-color;
                     }
+                    @keyframes tooltip-appear {
+                        from {
+                        opacity: 0;
+                        }
+                        to {
+                        opacity: 1;
+                        }
+                    }
+                    @mixin tooltip-animation {
+                        animation-name: tooltip-appear;
+                        animation-duration: 0.2s;
+                        animation-delay: 0.5s;
+                        animation-fill-mode: forwards;
+                    }
+                    &.tooltipped {
+                        &:hover::before {
+                            @include tooltip-animation();
+                            opacity: 0;
+                            position: absolute;
+                            z-index: 1000001;
+                            width: 0;
+                            height: 0;
+                            color: rgba(0, 0, 0, 0.8);
+                            pointer-events: none;
+                            content: "";
+                            border: 5px solid transparent;
+                            top: -5px;
+                            right: 50%;
+                            bottom: auto;
+                            margin-right: -5px;
+                            border-top-color: rgba(0, 0, 0, 0.8);
+                        }
+                        &:hover::after {
+                            @include tooltip-animation();
+                            font-size: 11px;
+                            opacity: 0;
+                            position: absolute;
+                            z-index: 1000000;
+                            padding: 5px 8px;
+                            color: #fff;
+                            pointer-events: none;
+                            content: attr(aria-label);
+                            background: rgba(0, 0, 0, 0.8);
+                            border-radius: 3px;
+                            right: 50%;
+                            bottom: 100%;
+                            transform: translateX(50%);
+                            margin-bottom: 5px;
+                            white-space: nowrap;
+                        }
+                    }
                 }
             }
         }