diff options
5 files changed, 153 insertions, 0 deletions
diff --git a/packages/gitbook-core/src/components/Tooltipped.js b/packages/gitbook-core/src/components/Tooltipped.js new file mode 100644 index 0000000..4d297fd --- /dev/null +++ b/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; diff --git a/packages/gitbook-core/src/index.js b/packages/gitbook-core/src/index.js index 840fffb..534eb2d 100644 --- a/packages/gitbook-core/src/index.js +++ b/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 diff --git a/packages/gitbook-plugin-theme-default/less/Tooltipped.less b/packages/gitbook-plugin-theme-default/less/Tooltipped.less new file mode 100644 index 0000000..126daab --- /dev/null +++ b/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(); + } +} diff --git a/packages/gitbook-plugin-theme-default/less/main.less b/packages/gitbook-plugin-theme-default/less/main.less index 960477d..65219bc 100644 --- a/packages/gitbook-plugin-theme-default/less/main.less +++ b/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); diff --git a/packages/gitbook-plugin-theme-default/less/variables.less b/packages/gitbook-plugin-theme-default/less/variables.less index 95d34ab..38bb0af 100644 --- a/packages/gitbook-plugin-theme-default/less/variables.less +++ b/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; |