├── .eslintrc
├── .gitignore
├── .npmignore
├── README.md
├── build
    └── index.html
├── config
    └── loaders.js
├── example
    ├── Main.js
    └── components
    │   ├── App.js
    │   ├── App.sass
    │   ├── Layout.js
    │   ├── Layout.sass
    │   ├── Page.js
    │   ├── Page.sass
    │   └── Tooltip
    │       ├── Tooltip.js
    │       ├── Tooltip.sass
    │       ├── TooltipExamples.js
    │       └── TooltipExamples.sass
├── html-hint-cc.sass
├── html-hint.sass
└── package.json


/.eslintrc:
--------------------------------------------------------------------------------
 1 | 
 2 | {
 3 |   "extends": "airbnb",
 4 |   "parser": "babel-eslint",
 5 |   "rules": {
 6 |     "no-nested-ternary": 0,
 7 |     "react/prop-types": 0
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | _*
3 | /dist
4 | /build/*
5 | !/build/index.html
6 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | /.*/
 2 | /.*
 3 | .DS_Store
 4 | *.log
 5 | src
 6 | test
 7 | example
 8 | config
 9 | /appveyor.yml
10 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ## HTML HINT
  2 | 
  3 | *based on [hint.css](https://github.com/chinchang/hint.css) with html content support*
  4 | 
  5 | The main disadvantage of [hint.css](https://github.com/chinchang/hint.css) is it's inability to show html content inside hint.
  6 | This css library extends [hint.css](https://github.com/chinchang/hint.css) with html hints.
  7 | 
  8 | #### Example
  9 | 
 10 | [Base, click to view](http://istarkov.github.io/html-hint/#exampleMain)
 11 | 
 12 | ### Install
 13 | 
 14 | ```bash
 15 | npm install --save html-hint
 16 | ```
 17 | 
 18 | ### Usage
 19 | 
 20 | ```html
 21 | <div class="hint--html hint--top">
 22 |   Place here any element
 23 |   <div class="hint__content">
 24 |     Place here your tooltip HTML content
 25 |   </div>
 26 | </div>
 27 | ```
 28 | 
 29 | If you are prefer to use css-modules you can use composes
 30 | 
 31 | ```html
 32 | <div class={styles.myClass}>
 33 |   Place here any element
 34 |   <div class={styles.myTooltip}>
 35 |     Place here your tooltip HTML content
 36 |   </div>
 37 | </div>
 38 | ```
 39 | 
 40 | ```scss
 41 | @import 'html-hint'
 42 | 
 43 | .myClass
 44 |   composes: hint--html
 45 |   composes: hint--top
 46 |   composes: hint--info
 47 |   cursor: pointer
 48 | 
 49 | .myTooltip
 50 |   composes: hint__content
 51 | ```
 52 | 
 53 | There are different placement options
 54 | - `hint--top-left`, `hint--top`, `hint--top-right`;
 55 | - `hint--left`, `hint--right`,
 56 | - `hint--bottom-left`, `hint--bottom`, `hint--bottom-right`,
 57 | 
 58 | And different type options
 59 | - `hint--warning`, `hint--error`, `hint--info`, `hint--success`
 60 | 
 61 | (_To change color you can also use mixin_)
 62 | 
 63 | ```scss
 64 | .myClass
 65 |   composes: hint--html
 66 |   composes: hint--top
 67 |   @include hint-color(yellow)
 68 |   cursor: pointer
 69 | ```
 70 | 
 71 | #### Placement options example
 72 | 
 73 | [Base, click to view](http://istarkov.github.io/html-hint/#exampleMain)
 74 | 
 75 | ---
 76 | 
 77 | By default tootips are not hoverable, adding `hint--hoverable` class makes them hoverable.
 78 | 
 79 | ```html
 80 | <div class="hint--html hint--top hint--hoverable">
 81 |   Place here any element
 82 |   <div class="hint__content">
 83 |     Place here your tooltip HTML content
 84 |   </div>
 85 | </div>
 86 | ```
 87 | 
 88 | #### Hoverable example
 89 | 
 90 | [Hoverable example, click to view](http://istarkov.github.io/html-hint/#exampleHoverable)
 91 | 
 92 | Sometimes you need to set hover by yourself.
 93 | 
 94 | Using `hint--always` class you will make tooltip always visible,
 95 | using `hint--hidden` you will prevent tooltip to show.
 96 | 
 97 | (_both hint--always and hint--hidden will hide tooltip on hover_)
 98 | 
 99 | #### hint--always example
100 | 
101 | [Always example, click to view](http://istarkov.github.io/html-hint/#exampleAlways)
102 | 
103 | ### Contribute
104 | 
105 | ```bash
106 | npm install
107 | npm run start
108 | # open http://localhost:4000 and you will get hot reloadable env
109 | ```
110 | 
111 | ### License
112 | 
113 | MIT (http://www.opensource.org/licenses/mit-license.php)
114 | 


--------------------------------------------------------------------------------
/build/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>html-hint documentation</title>
 5 |   </head>
 6 |   <body>
 7 |     <div id="app"></div>
 8 |     <script type="text/javascript" src="./bundle.js"></script>
 9 |   </body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/config/loaders.js:
--------------------------------------------------------------------------------
 1 | var autoprefixer = require('autoprefixer');  // eslint-disable-line no-var
 2 | const webpack = require('webpack');
 3 | 
 4 | const envObj = Object.keys(process.env)
 5 |   .reduce((r, k) => Object.assign({}, r, {
 6 |     [k]: JSON.stringify(process.env[k]),
 7 |   }), {});
 8 | 
 9 | module.exports = {
10 |   postcss: [
11 |     autoprefixer({ browsers: ['last 2 versions'] }),
12 |   ],
13 |   plugins: [
14 |     new webpack.DefinePlugin({
15 |       'process.env': envObj,
16 |     }),
17 |   ],
18 |   module: {
19 |     loaders: [
20 |       {
21 |         test: /\.sass$/,
22 |         loaders: [
23 |           'style-loader',
24 |           'css-loader?modules&importLoaders=2&localIdentName=[name]__[local]__[hash:5]',
25 |           'postcss-loader',
26 |           `sass-loader?precision=10&indentedSyntax=sass`,
27 |         ],
28 |       },
29 |       {
30 |         test: /\.css$/,
31 |         loaders: [
32 |           'style-loader',
33 |           'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]__[hash:5]',
34 |           'postcss-loader',
35 |         ],
36 |       },
37 |       {
38 |         test: /\.svg$/,
39 |         loaders: ['url-loader?limit=7000'],
40 |       },
41 |       {
42 |         test: /\.md$/,
43 |         loaders: ['raw-loader'],
44 |       },
45 |     ],
46 |   },
47 | };
48 | 


--------------------------------------------------------------------------------
/example/Main.js:
--------------------------------------------------------------------------------
 1 | // file: main.jsx
 2 | // import 'babel-polyfill';
 3 | import React from 'react';
 4 | import { render } from 'react-dom';
 5 | import App from './components/App';
 6 | 
 7 | const mountNode = document.getElementById('app');
 8 | 
 9 | render(<App/>, mountNode);
10 | 


--------------------------------------------------------------------------------
/example/components/App.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | 
 3 | import 'normalize.css/normalize.css';
 4 | import './App.sass';
 5 | 
 6 | import Layout from './Layout.js';
 7 | import Page from './Page.js';
 8 | 
 9 | // This class is needed for hmr
10 | export default class App extends Component {
11 |   render() {
12 |     return (
13 |       <Layout><Page /></Layout>
14 |     );
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/example/components/App.sass:
--------------------------------------------------------------------------------
 1 | :global(#app)
 2 |   height: 100%
 3 | 
 4 | html, body
 5 |   height: 100%
 6 |   font-size: 14px
 7 | 
 8 | html
 9 |   box-sizing: border-box
10 | 
11 | *, *:before, *:after
12 |   box-sizing: inherit
13 | 


--------------------------------------------------------------------------------
/example/components/Layout.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import compose from 'recompose/compose';
 3 | import defaultProps from 'recompose/defaultProps';
 4 | import layoutStyles from './Layout.sass';
 5 | 
 6 | // for hmr to work I need the first class to extend Component
 7 | export const layoutComp = ({
 8 |   styles: { layout, header, main, footer, logo },
 9 |   children,
10 | }) => (
11 |   <div className={layout}>
12 |     <header className={header}>
13 |       <h4>
14 |         HTML HINT
15 |       </h4>
16 |       <div>
17 |         <a href="https://github.com/istarkov/html-hint">
18 |           github.com
19 |         </a>
20 |       </div>
21 |     </header>
22 |     <main className={main}>
23 |       {children}
24 |     </main>
25 |     <footer className={footer}>
26 |       <div>
27 |         <a href="https://github.com/istarkov">
28 |           Ivan Starkov
29 |         </a>
30 |       </div>
31 |       <div className={logo}></div>
32 |       <div>
33 |         <a href="https://twitter.com/icelabaratory">
34 |           @icelabaratory
35 |         </a>
36 |       </div>
37 |     </footer>
38 |   </div>
39 | );
40 | 
41 | export const layoutHOC = compose(
42 |   defaultProps({
43 |     styles: layoutStyles,
44 |   })
45 | );
46 | 
47 | export default layoutHOC(layoutComp);
48 | 


--------------------------------------------------------------------------------
/example/components/Layout.sass:
--------------------------------------------------------------------------------
 1 | .layout
 2 |   display: flex
 3 |   min-height: 100vh
 4 |   flex-direction: column
 5 |   margin: 0 1px 0 1px
 6 | 
 7 | .header
 8 |   height: 3em
 9 |   // background-color: #004336
10 |   border-bottom: 1px solid #ccc
11 |   color: #333
12 |   display: flex
13 |   align-items: center
14 |   justify-content: space-between
15 |   padding: 0 10px 0 10px
16 |   a
17 |     color: #333
18 | 
19 | .logo
20 |   width: 1.3em
21 |   height: 1.3em
22 |   margin: 0.3em
23 |   background-size: contain
24 |   background-repeat: no-repeat
25 |   background-image: url('https://avatars2.githubusercontent.com/u/5077042?v=3&s=40')
26 | 
27 | .main
28 |   flex: 1
29 |   // padding: 20px
30 |   display: flex
31 |   justify-content: center
32 | 
33 | .footer
34 |   height: 3em
35 |   border-top: 1px solid #ccc
36 |   // background-color: #004336
37 |   color: #333
38 |   display: flex
39 |   align-items: center
40 |   justify-content: center
41 |   a
42 |     color: #333
43 | 


--------------------------------------------------------------------------------
/example/components/Page.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import compose from 'recompose/compose';
 3 | import defaultProps from 'recompose/defaultProps';
 4 | // import Markdown from './Markdown';
 5 | import githubCss from 'github-markdown-css/github-markdown.css';
 6 | import hlJsCss from 'highlight.js/styles/github.css';
 7 | import Markdown from 'react-components-markdown';
 8 | 
 9 | import TooltipExamples from './Tooltip/TooltipExamples';
10 | import pageStyles from './Page.sass';
11 | import mdContent from '../../README.md';
12 | 
13 | export const page = ({ styles, markdownStyles, paragraphs, content }) => (
14 |   <div className={styles.main}>
15 |     <Markdown
16 |       styles={markdownStyles}
17 |       exampleMain={
18 |         <TooltipExamples {...{ paragraphs, always: false, hoverable: false }} />
19 |       }
20 |       exampleHoverable={
21 |         <TooltipExamples {...{ paragraphs, always: false, hoverable: true }} />
22 |       }
23 |       exampleAlways={
24 |         <div className={styles.bigMargin}>
25 |           {
26 |             <TooltipExamples {...{ paragraphs, always: true, hoverable: false }} />
27 |           }
28 |         </div>
29 |       }
30 |     >
31 |       {content}
32 |     </Markdown>
33 |   </div>
34 | );
35 | 
36 | export const pageHOC = compose(
37 |   defaultProps({
38 |     styles: pageStyles,
39 |     markdownStyles: {
40 |       ...githubCss,
41 |       ...hlJsCss,
42 |     },
43 |     content: mdContent,
44 |     paragraphs: [
45 |       {
46 |         tooltips: [
47 |           { position: 'top-left', type: 'warning' },
48 |           { position: 'top', type: 'error' },
49 |           { position: 'top-right', type: 'info' },
50 |         ],
51 |       },
52 |       {
53 |         tooltips: [
54 |           { position: 'left', type: 'info' },
55 |           { position: 'right', type: 'success' },
56 |         ],
57 |       },
58 |       {
59 |         tooltips: [
60 |           { position: 'bottom-left', type: 'warning' },
61 |           { position: 'bottom', type: 'error' },
62 |           { position: 'bottom-right', type: 'info' },
63 |         ],
64 |       },
65 |     ],
66 |   }),
67 | );
68 | 
69 | export default pageHOC(page);
70 | 


--------------------------------------------------------------------------------
/example/components/Page.sass:
--------------------------------------------------------------------------------
 1 | .main
 2 |   flex-basis: 1024px
 3 |   padding: 30px
 4 |   border-left: 1px solid #ccc
 5 |   border-right: 1px solid #ccc
 6 | 
 7 | .bigMargin
 8 |   margin-top: 80px
 9 |   margin-bottom: 80px
10 | 


--------------------------------------------------------------------------------
/example/components/Tooltip/Tooltip.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import cx from 'classnames';
 3 | import compose from 'recompose/compose';
 4 | import defaultProps from 'recompose/defaultProps';
 5 | import mapPropsOnChange from 'recompose/mapPropsOnChange';
 6 | import tooltipStyles from './Tooltip.sass';
 7 | 
 8 | export const tooltipComp = ({ styles, children, tooltip }) => (
 9 |   <div
10 |     className={styles.main}
11 |   >
12 |     {children}
13 |     <div className={styles.tooltip}>
14 |       { tooltip }
15 |     </div>
16 |   </div>
17 | );
18 | 
19 | export const tooltipHOC = compose(
20 |   defaultProps({
21 |     styles: tooltipStyles,
22 |     // top, top-left, top-right, bottom, bottom-left, bottom-right
23 |     position: 'top',
24 |     type: 'info', // error,
25 |     always: false,
26 |     hoverable: false,
27 |   }),
28 |   mapPropsOnChange(
29 |     ['position', 'type', 'always', 'hoverable', 'hidden', 'styles'],
30 |     ({ position, type, always, hoverable, hidden, styles }) => ({
31 |       styles: {
32 |         ...styles,
33 |         main: cx({
34 |           [styles.main]: true,
35 |           [styles[`hint--${type}`]]: true,
36 |           [styles[`hint--${position}`]]: true,
37 |           [styles[`hint--always`]]: always,
38 |           [styles[`hint--hoverable`]]: hoverable,
39 |           [styles[`hint--hidden`]]: hidden,
40 |         }),
41 |       },
42 |     })
43 |   )
44 | );
45 | 
46 | export default tooltipHOC(tooltipComp);
47 | 


--------------------------------------------------------------------------------
/example/components/Tooltip/Tooltip.sass:
--------------------------------------------------------------------------------
 1 | @import '../../../html-hint-cc.sass'
 2 | 
 3 | /**
 4 |  * hint part
 5 |  */
 6 | .main
 7 |   composes: hint--html
 8 |   // to prevent hint hiding on hover
 9 |   // composes: hintHoverable
10 |   // to set your color use
11 |   // @include hint-color(yellow)
12 |   // to add hint offset
13 |   cursor: pointer
14 | 
15 | .tooltip
16 |   composes: hint__content
17 | 


--------------------------------------------------------------------------------
/example/components/Tooltip/TooltipExamples.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import compose from 'recompose/compose';
 3 | import defaultProps from 'recompose/defaultProps';
 4 | import Tooltip from './Tooltip.js';
 5 | import tooltipExamplesStyles from './TooltipExamples.sass';
 6 | 
 7 | export const tooltipExamples = ({ paragraphs, styles, always, hoverable, hidden }) => (
 8 |   <div className={styles.exampleBlock}>
 9 |     <div className={styles.example}>
10 |       {
11 |         paragraphs.map(({ tooltips }, pIndex) => (
12 |           <div key={pIndex} className={styles.paragraph}>
13 |             {
14 |               tooltips.map(({ position, type }, tIndex) => (
15 |                 <Tooltip
16 |                   key={`tooltip_${tIndex}`}
17 |                   position={position}
18 |                   type={type}
19 |                   always={always}
20 |                   hidden={hidden}
21 |                   hoverable={hoverable}
22 |                   tooltip={
23 |                     <div className={styles.tooltip}>
24 |                       <h3>Hello World</h3>
25 |                       <div>
26 |                         Tell me what you doing
27 |                       </div>
28 |                       <a href="#">Some Link</a>
29 |                     </div>
30 |                   }
31 |                 >
32 |                   <div className={styles.highlite}>{`${position} tooltip`}</div>
33 |                 </Tooltip>
34 |               ))
35 |             }
36 |           </div>
37 |         ))
38 |       }
39 |     </div>
40 |   </div>
41 | );
42 | 
43 | export const tooltipExamplesHOC = compose(
44 |   defaultProps({
45 |     styles: tooltipExamplesStyles,
46 |   })
47 | );
48 | 
49 | export default tooltipExamplesHOC(tooltipExamples);
50 | 


--------------------------------------------------------------------------------
/example/components/Tooltip/TooltipExamples.sass:
--------------------------------------------------------------------------------
 1 | 
 2 | .tooltip
 3 |   white-space: nowrap
 4 |   >*
 5 |     margin: 0
 6 |     &:not(:last-child)
 7 |       margin-bottom: 5px
 8 | 
 9 | .highlite
10 |   // color: blue
11 |   width: 140px
12 |   height: 60px
13 |   border: 1px solid white
14 |   background-color: #BEDFD2
15 |   display: flex
16 |   align-items: center
17 |   justify-content: center
18 | 
19 | .paragraph
20 |   display: flex
21 |   justify-content: space-between
22 | 
23 | .example
24 |   display: flex
25 |   flex-direction: column
26 | 
27 | .exampleBlock
28 |   margin: 30px
29 |   display: flex
30 |   justify-content: center
31 | 


--------------------------------------------------------------------------------
/html-hint-cc.sass:
--------------------------------------------------------------------------------
 1 | @import './html-hint.sass'
 2 | 
 3 | .hintHtml
 4 |   composes: hint--html
 5 | 
 6 | .hintContent
 7 |   composes: hint__content
 8 | 
 9 | .hintHoverable
10 |   composes: hint--hoverable
11 | 
12 | .hintAlways
13 |   composes: hint--always
14 | 
15 | .hintInfo
16 |   composes: hint--info
17 | 
18 | .hintError
19 |   composes: hint--error
20 | 
21 | .hintWarning
22 |   composes: hint--warning
23 | 
24 | .hintSuccess
25 |   composes: hint--success
26 | 
27 | .hintHidden
28 |   composes: hint--hidden
29 | 
30 | .hintTop
31 |   composes: hint--top
32 | 
33 | .hintTopRight
34 |   composes: hint--top-right
35 | 
36 | .hintTopLeft
37 |   composes: hint--top-left
38 | 
39 | .hintBottom
40 |   composes: hint--bottom
41 | 
42 | .hintBottomRight
43 |   composes: hint--bottom-right
44 | 
45 | .hintBottomLeft
46 |   composes: hint--bottom-left
47 | 


--------------------------------------------------------------------------------
/html-hint.sass:
--------------------------------------------------------------------------------
  1 | @import './node_modules/hint.css/src/hint.scss'
  2 | 
  3 | /**
  4 |  * based on hint.css with html content support
  5 |  */
  6 | 
  7 | $custom-hint-hover-helper-size: 12px
  8 | 
  9 | //remove default hint
 10 | .hint--html
 11 |   &.hint
 12 |     &:after
 13 |       display: none
 14 |       opacity: 0
 15 | 
 16 | .hint__content
 17 |   background: $hintDefaultColor
 18 |   color: white
 19 |   padding: 8px 10px
 20 |   font-size: 12px
 21 |   line-height: 12px
 22 |   pointer-events: none
 23 | 
 24 | .hint--hoverable
 25 |   .hint__content
 26 |     pointer-events: auto
 27 | 
 28 | .hint--html
 29 |   position: relative
 30 |   display: inline-block
 31 | 
 32 |   &:before, &:after
 33 |     position: absolute
 34 | 
 35 |     // HACK: Trigger hardware accelerated rendering, otherwise transform was not
 36 |     // working on a hidden element
 37 |     @include vendor('transform', translate3d(0, 0, 0))
 38 | 
 39 |     // HACK: visibility is set to hidden because IE & Opera don't support
 40 |     // pointer-events on HTML content yet because of which hovering a hidden tooltip
 41 |     // shows the tooltip.
 42 |     visibility: hidden
 43 |     opacity: 0
 44 |     z-index: $hintZIndex
 45 |     // shouldn't receive pointer events, otherwise even hovering tooltip will make it appear
 46 |     pointer-events: none
 47 | 
 48 |     @include vendor('transition', 0.3s ease)
 49 |     @include vendor('transition-delay', $hintHideDelay)
 50 | 
 51 | 
 52 |   &:hover:before, &:hover:after
 53 |     visibility: visible
 54 |     opacity: 1
 55 | 
 56 |   &:hover:before, &:hover:after
 57 |     // $hintShowDelay will apply as soon as element is hovered.
 58 |     @include vendor('transition-delay', $hintShowDelay)
 59 | 
 60 |   /**
 61 |    * tooltip arrow
 62 |    */
 63 |   &:before
 64 |     content: ''
 65 |     position: absolute
 66 |     background: transparent
 67 |     border: $hintArrowBorderWidth solid transparent
 68 |     // move z-index 1 up than :after so that it shows over box-shadow
 69 |     z-index: $hintZIndex + 1
 70 | 
 71 | 
 72 | .hint--html
 73 |   .hint__content
 74 |     position: absolute
 75 | 
 76 |     // HACK: Trigger hardware accelerated rendering, otherwise transform was not
 77 |     // working on a hidden element
 78 |     @include vendor('transform', translate3d(0, 0, 0))
 79 | 
 80 |     // HACK: visibility is set to hidden because IE & Opera don't support
 81 |     // pointer-events on HTML content yet because of which hovering a hidden tooltip
 82 |     // shows the tooltip.
 83 |     visibility: hidden
 84 |     opacity: 0
 85 |     z-index: $hintZIndex
 86 |     // shouldn't receive pointer events, otherwise even hovering tooltip will make it appear
 87 |     //pointer-events: none
 88 | 
 89 |     @include vendor('transition', 0.3s ease)
 90 |     @include vendor('transition-delay', $hintHideDelay)
 91 | 
 92 | 
 93 |   &:hover .hint__content,
 94 |   &:focus .hint__content
 95 |     visibility: visible
 96 |     opacity: 1
 97 | 
 98 | 
 99 |   &:hover .hint__content
100 |     // $hintShowDelay will apply as soon as element is hovered.
101 |     @include vendor('transition-delay', $hintShowDelay)
102 | 
103 |   &.hint--notrans
104 |     &:before, &:after
105 |       @include vendor('transition', none)
106 |     .hint__content
107 |       @include vendor('transition', none)
108 | 
109 | 
110 | @mixin ice-set-margin($property, $transitionDirection, $xDirection:0)
111 |   $translateX: -50%
112 |   @if $xDirection == -1
113 |     $translateX: -100%
114 |   @elseif $xDirection == 1
115 |     $translateX: 0
116 | 
117 |   $value: unquote("#{$property}(#{$hintTransitionDistance * $transitionDirection})")
118 |   @if $translateX != 0
119 |     @include vendor('transform', translateX($translateX) $value)
120 |   @else
121 |     @include vendor('transform', $value)
122 | 
123 | 
124 | 
125 | @mixin ice-vertical-positioned-tooltip($propertyY, $transitionDirection, $xDirection:0)
126 |   .hint__content
127 |     #{$propertyY}: 100%
128 |     left: 50%
129 | 
130 |   $translateX: -50%
131 |   @if $xDirection == -1
132 |   	$translateX: -100%
133 |   @elseif $xDirection == 1
134 |   	$translateX: 0
135 | 
136 |   &:before, .hint__content
137 |     @include vendor('transform', translateX($translateX))
138 | 
139 |   &:before
140 |     @if $xDirection != 0
141 |       margin-left: -$xDirection * $hintArrowOffsetX
142 |   .hint__content
143 |     @if $xDirection != 0
144 |       margin-left: -2 * $xDirection * $hintArrowOffsetX
145 | 
146 |   .hint__content
147 |     &:after //to prevent mouse out
148 |       content: ' '
149 |       position: absolute
150 |       @if $transitionDirection == -1
151 |         top: 100%
152 |       @else
153 |         top: -$custom-hint-hover-helper-size
154 |       left: 0
155 |       height: $custom-hint-hover-helper-size
156 |       width: 100%
157 |       opacity: 0
158 |       background-color: red
159 | 
160 |   &:hover .hint__content, &:focus .hint__content
161 |     @include ice-set-margin('translateY', $transitionDirection, $xDirection)
162 | 
163 | 
164 | @mixin ice-horizontal-positioned-tooltip($propertyX, $transitionDirection)
165 |   &:before
166 |     // get the arrow out
167 |     margin-#{$propertyX}: -2 * $hintArrowBorderWidth
168 |     // bring back to center
169 |     margin-bottom: -1 * $hintArrowBorderWidth
170 |   .hint__content
171 |     // bring back to center
172 |     margin-bottom: -1 * floor($hintTooltipHeight / 2)
173 | 
174 |   .hint__content
175 |     #{$propertyX}: 100%
176 |     bottom: 50%
177 | 
178 |   .hint__content
179 |     &:after //to prevent mouse out
180 |       content: ' '
181 |       position: absolute
182 |       @if $transitionDirection == -1
183 |         left: 100%
184 |       @else
185 |         left: -$custom-hint-hover-helper-size
186 |       top: 0
187 |       height: 100%
188 |       width: $custom-hint-hover-helper-size
189 |       opacity: 0
190 |       background-color: red
191 | 
192 |   &:hover .hint__content, &:focus .hint__content
193 |   	@include ice-set-margin('translateX', $transitionDirection, 1)
194 | 
195 | 
196 | 
197 | /**
198 |  * top tooltip
199 |  */
200 | .#{$hintPrefix}top
201 |   @include ice-vertical-positioned-tooltip('bottom', -1)
202 | 
203 | .#{$hintPrefix}top-left
204 |   @include ice-vertical-positioned-tooltip('bottom', -1, -1)
205 | 
206 | .#{$hintPrefix}top-right
207 |   @include ice-vertical-positioned-tooltip('bottom', -1, 1)
208 | 
209 | /**
210 |  * bottom tooltip
211 |  */
212 | .#{$hintPrefix}bottom
213 |   @include ice-vertical-positioned-tooltip('top', 1)
214 | 
215 | .#{$hintPrefix}bottom-left
216 |   @include ice-vertical-positioned-tooltip('top', 1, -1)
217 | 
218 | .#{$hintPrefix}bottom-right
219 |   @include ice-vertical-positioned-tooltip('top', 1, 1)
220 | 
221 | 
222 | /**
223 |  * right tooltip
224 |  */
225 | .#{$hintPrefix}right
226 |   @include ice-horizontal-positioned-tooltip('left', 1)
227 | 
228 | 
229 | /**
230 |  * left tooltip
231 |  */
232 | .#{$hintPrefix}left
233 |   @include ice-horizontal-positioned-tooltip('right', -1)
234 | 
235 | 
236 | 
237 | @mixin hint-color($color)
238 |   .hint__content
239 |     background-color: $color
240 |   @include arrow-border-color($color)
241 | 
242 | 
243 | /**
244 |  * Error
245 |  */
246 | .#{$hintPrefix}error
247 |   @include hint-color($hintErrorColor)
248 | 
249 | 
250 | /**
251 |  * Warning
252 |  */
253 | .#{$hintPrefix}warning
254 |   @include hint-color($hintWarningColor)
255 | 
256 | 
257 | /**
258 |  * Info
259 |  */
260 | .#{$hintPrefix}info
261 |   @include hint-color($hintInfoColor)
262 | 
263 | 
264 | /**
265 |  * Success
266 |  */
267 | .#{$hintPrefix}success
268 |   @include hint-color($hintSuccessColor)
269 | 
270 | .hint--html
271 |   &.#{$hintPrefix}hidden
272 |     &:hover
273 |       &:after,&:before
274 |         opacity: 0
275 |         visibility: hidden
276 | 
277 |       .hint__content
278 |         opacity: 0
279 |         visibility: hidden
280 | 
281 | .hint--always
282 |   &:after, &:before
283 |     opacity: 1
284 |     visibility: visible
285 | 
286 |   .hint__content
287 |     opacity: 1
288 |     visibility: visible
289 | 
290 |   &.#{$hintPrefix}top
291 |     .hint__content
292 |       @include ice-set-margin('translateY', -1, 0)
293 | 
294 |   &.#{$hintPrefix}top-left
295 |     .hint__content
296 |       @include ice-set-margin('translateY', -1, -1)
297 | 
298 |   &.#{$hintPrefix}top-right
299 |     .hint__content
300 |       @include ice-set-margin('translateY', -1, 1)
301 | 
302 |   &.#{$hintPrefix}bottom
303 |     .hint__content
304 |       @include ice-set-margin('translateY', 1, 0)
305 | 
306 |   &.#{$hintPrefix}bottom-left
307 |     .hint__content
308 |       @include ice-set-margin('translateY', 1, -1)
309 | 
310 |   &.#{$hintPrefix}bottom-right
311 |     .hint__content
312 |       @include ice-set-margin('translateY', 1, 1)
313 | 
314 |   &.#{$hintPrefix}left
315 |     .hint__content
316 |       @include ice-set-margin('translateX', -1, 1)
317 | 
318 |   &.#{$hintPrefix}right
319 |     .hint__content
320 |       @include ice-set-margin('translateX', 1, 1)
321 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "html-hint",
 3 |   "version": "0.2.4",
 4 |   "description": "css hint based on hint.css with html content support",
 5 |   "main": "html-hint-cc.sass",
 6 |   "scripts": {
 7 |     "start": "kotatsu serve --port 4000 --config ./config/loaders.js --presets es2015,stage-0,react,react-hmre ./example/Main.js",
 8 |     "build-example": "NODE_ENV=production kotatsu build client --minify --config ./config/loaders.js --presets es2015,stage-0,react ./example/Main.js -o build",
 9 |     "prebuild": "rimraf dist && mkdir dist",
10 |     "build": "node-sass --output-style expanded html-hint.sass > ./dist/html-hint.css",
11 |     "min": "node-sass --output-style compressed html-hint.sass > ./dist/html-hint.min.css",
12 |     "prepublish": "npm run build && npm run min"
13 |   },
14 |   "repository": {
15 |     "type": "git",
16 |     "url": "git+https://github.com/istarkov/html-hint.git"
17 |   },
18 |   "keywords": [
19 |     "css",
20 |     "html",
21 |     "hint",
22 |     "tooltip"
23 |   ],
24 |   "author": "istarkov https://github.com/istarkov",
25 |   "license": "MIT",
26 |   "bugs": {
27 |     "url": "https://github.com/istarkov/html-hint/issues"
28 |   },
29 |   "homepage": "https://github.com/istarkov/html-hint#readme",
30 |   "devDependencies": {
31 |     "autoprefixer": "^6.3.1",
32 |     "babel-cli": "^6.4.5",
33 |     "babel-eslint": "^5.0.0",
34 |     "babel-polyfill": "^6.5.0",
35 |     "babel-preset-es2015": "^6.3.13",
36 |     "babel-preset-react": "^6.3.13",
37 |     "babel-preset-react-hmre": "^1.0.1",
38 |     "babel-preset-stage-0": "^6.3.13",
39 |     "classnames": "^2.2.3",
40 |     "core-js": "^2.1.0",
41 |     "css-loader": "^0.23.1",
42 |     "eslint": "~2.2.0",
43 |     "eslint-config-airbnb": "^6.0.2",
44 |     "eslint-plugin-react": "^4.0.0",
45 |     "file-loader": "^0.8.5",
46 |     "github-markdown-css": "^2.2.1",
47 |     "highlight.js": "^9.1.0",
48 |     "kotatsu": "^0.11.0",
49 |     "lodash": "^4.3.0",
50 |     "node-sass": "^3.4.2",
51 |     "normalize.css": "^3.0.3",
52 |     "postcss-loader": "^0.8.0",
53 |     "raw-loader": "^0.5.1",
54 |     "react": "^15.0.0",
55 |     "react-components-markdown": "^0.2.0",
56 |     "react-dom": "^15.0.0",
57 |     "react-motion": "^0.4.2",
58 |     "recompose": "^0.15.0",
59 |     "rimraf": "^2.5.1",
60 |     "sass-loader": "^3.1.2",
61 |     "style-loader": "^0.13.0",
62 |     "url-loader": "^0.5.7",
63 |     "webpack": "^1.12.13"
64 |   },
65 |   "dependencies": {
66 |     "hint.css": "2.2.0"
67 |   }
68 | }
69 | 


--------------------------------------------------------------------------------