Add component tooltip from gitbook-core

packages/gitbook-core/src/components/Tooltipped.js

@@ -0,0 +1,44 @@
+const React = require('react');
+const classNames = require('classnames');
+
+const POSITIONS = {
+    BOTTOM_RIGHT: 'e',
+    BOTTOM_LEFT:  'w',
+    TOP_LEFT:     'nw',
+    TOP_RIGHT:    'ne',
+    BOTTOM:       '',
+    TOP:          'n'
+};
+
+const Tooltipped = React.createClass({
+    propTypes: {
+        title:    React.PropTypes.string.isRequired,
+        position: React.PropTypes.string,
+        open:     React.PropTypes.bool,
+        children: React.PropTypes.node
+    },
+
+    statics: {
+        POSITIONS
+    },
+
+    render() {
+        const { title, position, open, children } = this.props;
+
+        const className = classNames(
+            'GitBook-Tooltipped',
+            position ? 'Tooltipped-' + position : '',
+            {
+                'Tooltipped-o': open
+            }
+        );
+
+        return (
+            <div className={className} aria-label={title}>
+                {children}
+            </div>
+        );
+    }
+});
+
+module.exports = Tooltipped;

packages/gitbook-core/src/index.js

@@ -17,6 +17,7 @@ const Button = require('./components/Button');
 const ButtonGroup = require('./components/ButtonGroup');
 const Dropdown = require('./components/Dropdown');
 const Backdrop = require('./components/Backdrop');
+const Tooltipped = require('./components/Tooltipped');
 const I18nProvider = require('./components/I18nProvider');
 
 const ACTIONS = require('./actions/TYPES');
@@ -58,6 +59,7 @@ module.exports = {
     ButtonGroup,
     Dropdown,
     Backdrop,
+    Tooltipped,
     // Utilities
     Shapes,
     // Librairies

packages/gitbook-plugin-theme-default/less/Tooltipped.less

@@ -0,0 +1,100 @@
+.GitBook-Tooltipped {
+    display: inline-block;
+    position: relative;
+
+    &:hover, &.Tooltipped-o {
+        &:after {
+            line-height: 1em;
+            background: @tooltip-background;
+            border-radius: @tooltip-radius;
+            bottom: auto;
+            top: ~"calc(100% + 10px)";
+            color: @tooltip-color;
+            content: attr(aria-label);
+            display: block;
+            left: 50%;
+            padding: 5px 5px;
+            position: absolute;
+            white-space: nowrap;
+            z-index: @zindex-tooltip;
+            font-size: 13px;
+            text-transform: none;
+            font-weight: @font-size-base;
+            pointer-events: none;
+            transform: translateX(-50%);
+        }
+
+        &:before {
+            border: solid;
+            border-color: @tooltip-background transparent;
+            bottom:auto;
+            top: ~"calc(100% + 5px)";
+            border-width: 0px 5px 5px 5px;
+            content: "";
+            display: block;
+            left: 50%;
+            position: absolute;
+            z-index: @zindex-tooltip+1;
+            transform: translateX(-50%);
+        }
+    }
+
+    .north() {
+        &:after {
+            top: auto;
+            bottom: ~"calc(100% + 10px)";
+            transform: translateX(0%);
+        }
+        &:before {
+            top: auto;
+            border-width: 5px 5px 0px 5px;
+            bottom: ~"calc(100% + 5px)";
+            transform: translateX(0%);
+        }
+    }
+    .west() {
+        &:after {
+            left: auto;
+            right: 5px;
+            transform: translateX(0%);
+        }
+        &:before {
+            left: auto;
+            right: 10px;
+            transform: translateX(0%);
+        }
+    }
+    .east() {
+        &:after {
+            right: auto;
+            left: 5px;
+            transform: translateX(0%);
+        }
+        &:before {
+            right: auto;
+            left: 10px;
+            transform: translateX(0%);
+        }
+    }
+
+    &.Tooltipped-e {
+        .east()
+    }
+
+    &.Tooltipped-n {
+        .north();
+    }
+
+    &.Tooltipped-ne {
+        .north();
+        .east();
+    }
+
+    &.Tooltipped-nw {
+        .north();
+        .west();
+    }
+    &.Tooltipped-sw, &.Tooltipped-w {
+        .west();
+    }
+}

packages/gitbook-plugin-theme-default/less/main.less

@@ -15,6 +15,7 @@
 @import "Body.less";
 @import "Dropdown.less";
 @import "LoadingBar.less";
+@import "Tooltipped.less";
 
 * {
     .box-sizing(border-box);

packages/gitbook-plugin-theme-default/less/variables.less

@@ -38,9 +38,15 @@
 @dropdown-border-color:             #e5e5e5;
 @dropdown-color:                    @button-color;
 @dropdown-hover-color:              @button-hover-color;
+// Tooltip
+@tooltip-background:                rgba(0,0,0,.8);
+@tooltip-radius:                    3px;
+@tooltip-color:                     #fff;
 // Search
 @search-highlight-color:            rgba(255, 220, 0, 0.4);
 // Font awesome
 @path-assets:                       '.';
 @path-fonts:                        '@{path-assets}/fonts';
 @fa-font-path:                      '@{path-fonts}/fontawesome';
+// Z-indexes
+@zindex-tooltip:                    300;