├── .gitignore ├── .editorconfig ├── bower.json ├── src ├── hint-rounded.scss ├── hint-theme.scss ├── hint.base.scss ├── hint.scss ├── hint-sizes.scss ├── hint-effects.scss ├── hint-always.scss ├── hint-color-types.scss ├── hint-mixins.scss ├── hint-variables.scss ├── hint-core.scss └── hint-position.scss ├── component.json ├── package.json ├── LICENSE-MIT ├── CONTRIBUTING.md ├── Gruntfile.js ├── README.md ├── hint.base.min.css ├── hint.min.css ├── demo.html ├── hint.base.css └── hint.css /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache 2 | node_modules/ 3 | hint.sublime-project 4 | hint.sublime-workspace 5 | *.map 6 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | end_of_line = lf 8 | indent_style = tab 9 | insert_final_newline = true 10 | trim_trailing_whitespace = true 11 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hint.css", 3 | "main": "hint.min.css", 4 | "author": "Kushagra Gour", 5 | "ignore": [ 6 | "CONTRIBUTING.md", 7 | "Gruntfile.js" 8 | ], 9 | "keywords": [ 10 | "hint", 11 | "tooltip", 12 | "tooltips", 13 | "ui" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /src/hint-rounded.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * source: hint-rounded.scss 3 | * 4 | * Defines rounded corner tooltips. 5 | * 6 | * Classes added: 7 | * 1) hint--rounded 8 | * 9 | */ 10 | 11 | .#{$hintPrefix}rounded { 12 | &:after { 13 | border-radius: 4px; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /component.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hint.css", 3 | "repo": "chinchang/hint.css", 4 | "description": "A tooltip library in CSS for your lovely websites.", 5 | "version": "1.3.6", 6 | "keywords": ["tooltip", "css"], 7 | "dependencies": {}, 8 | "development": {}, 9 | "styles": [ 10 | "hint.min.css" 11 | ] 12 | } 13 | 14 | -------------------------------------------------------------------------------- /src/hint-theme.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * source: hint-theme.scss 3 | * 4 | * Defines basic theme for tooltips. 5 | * 6 | */ 7 | 8 | [class*="#{$hintPrefix}"] { 9 | /** 10 | * tooltip body 11 | */ 12 | &:after { 13 | text-shadow: 0 -1px 0px darken($hintDefaultColor, $hintTextShadowDarkenAmount); 14 | box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); 15 | } 16 | } -------------------------------------------------------------------------------- /src/hint.base.scss: -------------------------------------------------------------------------------- 1 | // hint.base.scss 2 | // 3 | // Aggregates all other sass files to create a basic functional tooltip. 4 | // This doesn't have any of the cosmetic features of the library. 5 | 6 | /*-------------------------------------*\ 7 | HINT.css - A CSS tooltip library 8 | \*-------------------------------------*/ 9 | 10 | 11 | /** 12 | * HINT.css is a tooltip library made in pure CSS. 13 | * 14 | * Source: https://github.com/chinchang/hint.css 15 | * Demo: http://kushagragour.in/lab/hint/ 16 | * 17 | * Release under The MIT License 18 | * 19 | */ 20 | 21 | @import "hint-variables"; 22 | @import "hint-mixins"; 23 | @import "hint-core"; 24 | @import "hint-position"; 25 | @import "hint-sizes"; 26 | @import "hint-always"; -------------------------------------------------------------------------------- /src/hint.scss: -------------------------------------------------------------------------------- 1 | // hint.scss 2 | // 3 | // Aggregates all other sass files. 4 | 5 | /*-------------------------------------*\ 6 | HINT.css - A CSS tooltip library 7 | \*-------------------------------------*/ 8 | 9 | 10 | /** 11 | * HINT.css is a tooltip library made in pure CSS. 12 | * 13 | * Source: https://github.com/chinchang/hint.css 14 | * Demo: http://kushagragour.in/lab/hint/ 15 | * 16 | * Release under The MIT License 17 | * 18 | */ 19 | 20 | @import "hint-variables"; 21 | @import "hint-mixins"; 22 | @import "hint-core"; 23 | @import "hint-position"; 24 | @import "hint-sizes"; 25 | @import "hint-theme"; 26 | @import "hint-color-types"; 27 | @import "hint-always"; 28 | @import "hint-rounded"; 29 | @import "hint-effects"; 30 | -------------------------------------------------------------------------------- /src/hint-sizes.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * source: hint-sizes.scss 3 | * 4 | * Defines width restricted tooltips that can span 5 | * across multiple lines. 6 | * 7 | * Classes added: 8 | * 1) hint--small 9 | * 2) hint--medium 10 | * 3) hint--large 11 | * 12 | */ 13 | 14 | 15 | .#{$hintPrefix}small, 16 | .#{$hintPrefix}medium, 17 | .#{$hintPrefix}large { 18 | &:after { 19 | white-space: normal; 20 | line-height: 1.4em; 21 | word-wrap: break-word; // Ensure long words do not overflow. 22 | } 23 | } 24 | 25 | .#{$hintPrefix}small { 26 | &:after { 27 | width: $hintSizeSmall; 28 | } 29 | } 30 | .#{$hintPrefix}medium { 31 | &:after { 32 | width: $hintSizeMedium; 33 | } 34 | } 35 | .#{$hintPrefix}large { 36 | &:after { 37 | width: $hintSizeLarge; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/hint-effects.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * source: hint-effects.scss 3 | * 4 | * Defines various transition effects for the tooltips. 5 | * 6 | * Classes added: 7 | * 1) hint--no-animate 8 | * 2) hint--bounce 9 | * 10 | */ 11 | 12 | // Remove animation from tooltips. 13 | .#{$hintPrefix}no-animate { 14 | &:before, &:after { 15 | @include vendor('transition-duration', 0ms); 16 | } 17 | } 18 | 19 | // Bounce effect in tooltips. 20 | .#{$hintPrefix}bounce { 21 | &:before, &:after { 22 | -webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s cubic-bezier(.71,1.7,.77,1.24); 23 | -moz-transition: opacity 0.3s ease, visibility 0.3s ease, -moz-transform 0.3s cubic-bezier(.71,1.7,.77,1.24); 24 | transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(.71,1.7,.77,1.24); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hint", 3 | "title": "Hint.css", 4 | "description": "A tooltip library in CSS for your lovely websites.", 5 | "version": "2.3.2", 6 | "style": "hint.css", 7 | "homepage": "http://kushagragour.in/lab/hint/", 8 | "author": { 9 | "name": "Kushagra Gour", 10 | "email": "chinchang457@gmail.com", 11 | "url": "http://kushagragour.in" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "git://github.com/chinchang/hint.css.git" 16 | }, 17 | "bugs": { 18 | "url": "https://github.com/chinchang/hint.css/issues" 19 | }, 20 | "license": "MIT", 21 | "keywords": [ 22 | "tooltip", 23 | "ui", 24 | "sass", 25 | "css", 26 | "help", 27 | "hint" 28 | ], 29 | "devDependencies": { 30 | "grunt": "~0.4.1", 31 | "grunt-contrib-concat": "~0.3.0", 32 | "grunt-contrib-cssmin": "~0.12.3", 33 | "grunt-contrib-watch": "~0.5.3", 34 | "grunt-sass": "^1.1.0" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/hint-always.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * source: hint-always.scss 3 | * 4 | * Defines a persisted tooltip which shows always. 5 | * 6 | * Classes added: 7 | * 1) hint--always 8 | * 9 | */ 10 | 11 | .#{$hintPrefix}always { 12 | &:after, &:before { 13 | opacity: 1; 14 | visibility: visible; 15 | } 16 | 17 | &.#{$hintPrefix}top { 18 | @include set-margin('translateY', -1, -50%); 19 | 20 | &-left { 21 | @include set-margin('translateY', -1, -100%); 22 | } 23 | &-right { 24 | @include set-margin('translateY', -1, 0); 25 | } 26 | } 27 | 28 | &.#{$hintPrefix}bottom { 29 | @include set-margin('translateY', 1, -50%); 30 | &-left { 31 | @include set-margin('translateY', 1, -100%); 32 | } 33 | &-right { 34 | @include set-margin('translateY', 1, 0); 35 | } 36 | } 37 | 38 | &.#{$hintPrefix}left { 39 | @include set-margin('translateX', -1); 40 | } 41 | 42 | &.#{$hintPrefix}right { 43 | @include set-margin('translateX', 1); 44 | } 45 | } 46 | 47 | -------------------------------------------------------------------------------- /src/hint-color-types.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * source: hint-color-types.scss 3 | * 4 | * Contains tooltips of various types based on color differences. 5 | * 6 | * Classes added: 7 | * 1) hint--error 8 | * 2) hint--warning 9 | * 3) hint--info 10 | * 4) hint--success 11 | * 12 | */ 13 | 14 | 15 | // mixin to generate different color style tooltips 16 | @mixin hint-type($color) { 17 | &:after { 18 | background-color: $color; 19 | text-shadow: 0 -1px 0px darken($color, $hintTextShadowDarkenAmount); 20 | } 21 | 22 | // generate arrow color style 23 | @include arrow-border-color($color); 24 | } 25 | 26 | /** 27 | * Error 28 | */ 29 | .#{$hintPrefix}error { 30 | @include hint-type($hintErrorColor); 31 | } 32 | 33 | /** 34 | * Warning 35 | */ 36 | .#{$hintPrefix}warning { 37 | @include hint-type($hintWarningColor) 38 | } 39 | 40 | /** 41 | * Info 42 | */ 43 | .#{$hintPrefix}info { 44 | @include hint-type($hintInfoColor) 45 | } 46 | 47 | /** 48 | * Success 49 | */ 50 | .#{$hintPrefix}success { 51 | @include hint-type($hintSuccessColor) 52 | } 53 | -------------------------------------------------------------------------------- /LICENSE-MIT: -------------------------------------------------------------------------------- 1 | Copyright (c) 2013-2016 Kushagra Gour 2 | 3 | Permission is hereby granted, free of charge, to any person 4 | obtaining a copy of this software and associated documentation 5 | files (the "Software"), to deal in the Software without 6 | restriction, including without limitation the rights to use, 7 | copy, modify, merge, publish, distribute, sublicense, and/or sell 8 | copies of the Software, and to permit persons to whom the 9 | Software is furnished to do so, subject to the following 10 | conditions: 11 | 12 | The above copyright notice and this permission notice shall be 13 | included in all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 17 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 19 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 20 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 21 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /src/hint-mixins.scss: -------------------------------------------------------------------------------- 1 | // hint-mixins.scss 2 | // 3 | // Place to store common mixins. 4 | 5 | // Vendor prefixer mixin. 6 | @mixin vendor($property, $value) { 7 | -webkit-#{$property}: $value; 8 | -moz-#{$property}: $value; 9 | #{$property}: $value; 10 | } 11 | 12 | // Generates border-color rules for all possible positions 13 | @mixin arrow-border-color($color) { 14 | @each $position in top, bottom, left, right { 15 | @if $position == top or $position == bottom { 16 | // Loop further for classes like .top-left, bottom-right etc 17 | @each $xDir in left, right { 18 | &.#{$hintPrefix}#{$position}-#{$xDir}:before { 19 | border-#{$position}-color: $color; 20 | } 21 | } 22 | } 23 | &.#{$hintPrefix}#{$position}:before { 24 | border-#{$position}-color: $color; 25 | } 26 | } 27 | } 28 | 29 | // mixin to set margin on tooltip using translate transform 30 | // $property 31 | @mixin set-margin($property, $transitionDirection, $translateX: 0) { 32 | $value: unquote("#{$property}(#{$hintTransitionDistance * $transitionDirection})"); 33 | &:before { 34 | @include vendor('transform', $value); 35 | } 36 | &:after { 37 | @if $translateX != 0 { 38 | // For vertical tooltips, we need to animate in y-direction 39 | // retaining its x-transform. 40 | @include vendor('transform', translateX($translateX) $value); 41 | } 42 | @else { 43 | @include vendor('transform', $value); 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/hint-variables.scss: -------------------------------------------------------------------------------- 1 | // hint-variables.scss 2 | // 3 | // Declares some variables used within the library. 4 | 5 | // Prefix for all classes. By default, BEM naming convention is used 6 | $hintPrefix: 'hint--' !default; 7 | 8 | // font size 9 | $hintFontSize: 12px !default; 10 | 11 | // default font family 12 | $hintFontFamily: 'Helvetica Neue', Helvetica, Arial, sans-serif !default; 13 | 14 | // paddings 15 | $hintVerticalPadding: 8px !default; 16 | $hintHorizontalPadding: 10px !default; 17 | 18 | // default tooltip height 19 | $hintTooltipHeight: $hintFontSize + 2 * $hintVerticalPadding !default; 20 | 21 | // border-width for tooltip arrow 22 | $hintArrowBorderWidth: 6px !default; 23 | 24 | // horizontal arrow offset 25 | $hintArrowOffsetX: 2 * $hintArrowBorderWidth !default; 26 | 27 | // text-shadow darken percentage 28 | $hintTextShadowDarkenAmount: 25% !default; 29 | 30 | // transition distance 31 | $hintTransitionDistance: 8px !default; 32 | 33 | // Delay in showing the tooltips. 34 | $hintShowDelay: 100ms !default; 35 | 36 | // Delay in hiding the tooltips. 37 | $hintHideDelay: 0ms !default; 38 | 39 | // z-index for tooltips 40 | $hintZIndex: 1000000 !default; 41 | 42 | // Size options 43 | $hintSizeSmall: 80px !default; 44 | $hintSizeMedium: 150px !default; 45 | $hintSizeLarge: 300px !default; 46 | 47 | // Various colors 48 | // Default color is blackish 49 | $hintDefaultColor: hsl(0, 0%, 22%) !default; 50 | 51 | // Error color 52 | $hintErrorColor: hsl(1, 40%, 50%) !default; 53 | 54 | // Warning color 55 | $hintWarningColor: hsl(38, 46%, 54%) !default; 56 | 57 | // Info Color 58 | $hintInfoColor: hsl(200, 50%, 45%) !default; 59 | 60 | // Success Color 61 | $hintSuccessColor: hsl(121, 32%, 40%) !default; 62 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | **Hint** is written in [SASS](http://sass-lang.com/). 2 | 3 | #Setup 4 | 1. [Fork **Hint.css**](https://help.github.com/articles/fork-a-repo) and clone it on your system. 5 | 2. Create a new branch out off `master` for your fix/feature. `git checkout new-feature master` 6 | 7 | #Building 8 | 9 | **Hint.css** uses [Grunt](http://gruntjs.com/) for the build process which you need to have installed on your system. 10 | 11 | Also there are four additional Grunt tasks required to build the library: 12 | 13 | 1. [grunt-contrib-cssmin](https://npmjs.org/package/grunt-contrib-cssmin) 14 | 15 | 2. [grunt-sass](https://www.npmjs.com/package/grunt-sass) 16 | 17 | 3. [grunt-contrib-concat](https://www.npmjs.com/package/grunt-contrib-concat) 18 | 19 | 4. [grunt-contrib-watch](https://www.npmjs.com/package/grunt-contrib-watch) 20 | 21 | To install all the dependencies, run `npm install`. 22 | 23 | Once you have the dependencies installed, run `grunt` from the project directory. This will run the default grunt task which compiles the SCSS files into `hint.css` file. 24 | 25 | Though this should be sufficient for building the library for testing, in case you want to build the minified version as well you can run the `grunt deploy` command instead. 26 | 27 | #Things to remember 28 | - Do not fix multiple issues in a single commit. Keep them one thing per commit so that they can be picked easily incase only few commits require to be merged. 29 | 30 | - For every new modifier (example `hint--success`, `hint--top`) added, make a separate file unless it fits into a current modifier file. 31 | 32 | - Before submitting a patch, rebase your branch on upstream `master` to make life easier for the merger. 33 | 34 | - **DO NOT** add the library builds (`hint.css` & `hint.min.css`) in your commits. 35 | 36 | #Stay in touch 37 | 38 | To catch all updates and discussion, join the mailing list: **hintcss@googlegroups.com**. 39 | 40 | To subscribe: **hintcss+subscribe@googlegroups.com** or visit [here](https://groups.google.com/forum/?fromgroups=#!forum/hintcss). 41 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | /*global module:false*/ 2 | module.exports = function(grunt) { 3 | 4 | // Project configuration. 5 | grunt.initConfig({ 6 | pkg: grunt.file.readJSON('package.json'), 7 | 8 | meta: { 9 | getBanner: function () { 10 | return '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - <%= meta.banner %>'; 11 | }, 12 | getBannerForBaseVersion: function () { 13 | return '/*! <%= pkg.title || pkg.name %> (base version) - v<%= pkg.version %> - <%= meta.banner %>'; 14 | }, 15 | banner: '<%= grunt.template.today("yyyy-mm-dd") + "\\n" %>' + 16 | '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' + 17 | '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' + 18 | ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */\n\n' 19 | }, 20 | 21 | sass: { 22 | dist: { 23 | files: { 24 | '<%= pkg.name %>.css': 'src/<%= pkg.name %>.scss', 25 | '<%= pkg.name %>.base.css': 'src/<%= pkg.name %>.base.scss' 26 | } 27 | } 28 | }, 29 | 30 | cssmin: { 31 | options: { 32 | sourceMap: false 33 | }, 34 | compress: { 35 | files: { 36 | '<%= pkg.name %>.min.css': [ '<%= pkg.name %>.css' ], 37 | '<%= pkg.name %>.base.min.css': [ '<%= pkg.name %>.base.css' ] 38 | } 39 | } 40 | }, 41 | 42 | // concat banner to final lib files 43 | concat: { 44 | options: { 45 | banner: '<%= meta.getBanner() %>' 46 | }, 47 | lib: { 48 | src: ['<%= pkg.name %>.css'], 49 | dest: '<%= pkg.name %>.css' 50 | }, 51 | minLib: { 52 | src: ['<%= pkg.name %>.min.css'], 53 | dest: '<%= pkg.name %>.min.css' 54 | }, 55 | baseLib: { 56 | options: { 57 | banner: '<%= meta.getBannerForBaseVersion() %>' 58 | }, 59 | src: ['<%= pkg.name %>.base.css'], 60 | dest: '<%= pkg.name %>.base.css' 61 | }, 62 | baseMinLib: { 63 | options: { 64 | banner: '<%= meta.getBannerForBaseVersion() %>' 65 | }, 66 | src: ['<%= pkg.name %>.base.min.css'], 67 | dest: '<%= pkg.name %>.base.min.css' 68 | } 69 | }, 70 | 71 | watch: { 72 | files: 'src/*.scss', 73 | tasks: 'default' 74 | } 75 | }); 76 | 77 | // Dependencies 78 | grunt.loadNpmTasks('grunt-sass'); 79 | grunt.loadNpmTasks('grunt-contrib-cssmin'); 80 | grunt.loadNpmTasks('grunt-contrib-concat'); 81 | grunt.loadNpmTasks('grunt-contrib-watch'); 82 | 83 | // Default task. 84 | grunt.registerTask('default', 'sass'); 85 | grunt.registerTask('deploy', ['sass', 'cssmin', 'concat']); 86 | 87 | }; 88 | -------------------------------------------------------------------------------- /src/hint-core.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * source: hint-core.scss 3 | * 4 | * Defines the basic styling for the tooltip. 5 | * Each tooltip is made of 2 parts: 6 | * 1) body (:after) 7 | * 2) arrow (:before) 8 | * 9 | * Classes added: 10 | * 1) hint 11 | */ 12 | 13 | [class*="#{$hintPrefix}"] { 14 | position: relative; 15 | display: inline-block; 16 | 17 | &:before, &:after { 18 | position: absolute; 19 | 20 | // HACK: Trigger hardware accelerated rendering, otherwise transform was not 21 | // working on a hidden element 22 | @include vendor('transform', translate3d(0, 0, 0)); 23 | 24 | // HACK: visibility is set to hidden because IE & Opera don't support 25 | // pointer-events on HTML content yet because of which hovering a hidden tooltip 26 | // shows the tooltip. 27 | visibility: hidden; 28 | opacity: 0; 29 | z-index: $hintZIndex; 30 | // shouldn't receive pointer events, otherwise even hovering tooltip will make it appear 31 | pointer-events: none; 32 | 33 | @include vendor('transition', 0.3s ease); 34 | @include vendor('transition-delay', $hintHideDelay); 35 | } 36 | 37 | &:hover:before, &:hover:after { 38 | visibility: visible; 39 | opacity: 1; 40 | } 41 | 42 | &:hover:before, &:hover:after { 43 | // $hintShowDelay will apply as soon as element is hovered. 44 | @include vendor('transition-delay', $hintShowDelay); 45 | } 46 | 47 | /** 48 | * tooltip arrow 49 | */ 50 | &:before { 51 | content: ''; 52 | position: absolute; 53 | background: transparent; 54 | border: $hintArrowBorderWidth solid transparent; 55 | // move z-index 1 up than :after so that it shows over box-shadow 56 | z-index: $hintZIndex + 1; 57 | } 58 | 59 | /** 60 | * tooltip body 61 | */ 62 | &:after { 63 | background: $hintDefaultColor; 64 | color: white; 65 | padding: $hintVerticalPadding $hintHorizontalPadding; 66 | font-size: $hintFontSize; 67 | font-family: $hintFontFamily; 68 | line-height: $hintFontSize; // Vertical centering. 69 | white-space: nowrap; // Prevent breaking to new line. 70 | } 71 | // Always get content from aria-label attribute. 72 | &[aria-label]:after { 73 | content: attr(aria-label); // The magic! 74 | } 75 | // If the `data-hint` attribute is present, use it. 76 | // This might be deprecated in future in support of a11y. 77 | &[data-hint]:after { 78 | content: attr(data-hint); // The magic! 79 | } 80 | } 81 | 82 | // Hide tooltips if any of the supported attributes is empty. 83 | [aria-label=''], 84 | [data-hint=''] { 85 | &:before, &:after { 86 | display: none !important; 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /src/hint-position.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * source: hint-position.scss 3 | * 4 | * Defines the positoning logic for the tooltips. 5 | * 6 | * Classes added: 7 | * 1) hint--top 8 | * 2) hint--bottom 9 | * 3) hint--left 10 | * 4) hint--right 11 | */ 12 | 13 | @mixin vertical-positioned-tooltip($propertyY, $transitionDirection, $xDirection:0) { 14 | &:before { 15 | // bring arrow inside so that it animates to normal position when shown. 16 | // HACK: +1px to avoid the 1 px white space between arrow and body during transition. 17 | margin-#{$propertyY}: -2 * $hintArrowBorderWidth + 1px; 18 | } 19 | 20 | &:before, &:after { 21 | #{$propertyY}: 100%; 22 | left: 50%; // get top-left corner in center 23 | } 24 | 25 | &:before { 26 | left: calc(50% - #{$hintArrowBorderWidth}); // get arrow center aligned with content 27 | } 28 | 29 | $translateX: -50%; 30 | @if $xDirection == -1 { 31 | $translateX: -100%; 32 | } 33 | @elseif $xDirection == 1 { 34 | $translateX: 0; 35 | } 36 | 37 | &:after { 38 | @include vendor('transform', translateX($translateX)); 39 | } 40 | 41 | &:after { 42 | @if $xDirection != 0 { 43 | // bring back the tooltip by some offset so that arrow doesn't stick at end 44 | margin-left: -$xDirection * $hintArrowOffsetX; 45 | } 46 | } 47 | 48 | &:hover { 49 | @include set-margin('translateY', $transitionDirection, $translateX); 50 | } 51 | } 52 | 53 | @mixin horizontal-positioned-tooltip($propertyX, $transitionDirection) { 54 | &:before { 55 | // bring arrow inside so that it animates to normal position when shown 56 | // HACK: +1px to avoid the 1 px white space between arrow and body during transition. 57 | margin-#{$propertyX}: -2 * $hintArrowBorderWidth + 1px; 58 | // bring back to center vertically 59 | margin-bottom: -1 * $hintArrowBorderWidth; 60 | } 61 | 62 | &:after { 63 | // bring back to center 64 | margin-bottom: -1 * floor($hintTooltipHeight / 2); 65 | } 66 | 67 | &:before, &:after { 68 | #{$propertyX}: 100%; 69 | bottom: 50%; 70 | } 71 | 72 | &:hover { 73 | @include set-margin('translateX', $transitionDirection); 74 | } 75 | } 76 | 77 | 78 | /** 79 | * set default color for tooltip arrows 80 | */ 81 | @include arrow-border-color($hintDefaultColor); 82 | 83 | /** 84 | * top tooltip 85 | */ 86 | .#{$hintPrefix}top { 87 | @include vertical-positioned-tooltip('bottom', -1); 88 | } 89 | 90 | /** 91 | * bottom tooltip 92 | */ 93 | .#{$hintPrefix}bottom { 94 | @include vertical-positioned-tooltip('top', 1); 95 | } 96 | 97 | /** 98 | * right tooltip 99 | */ 100 | .#{$hintPrefix}right { 101 | @include horizontal-positioned-tooltip('left', 1); 102 | } 103 | 104 | /** 105 | * left tooltip 106 | */ 107 | .#{$hintPrefix}left { 108 | @include horizontal-positioned-tooltip('right', -1); 109 | } 110 | 111 | /** 112 | * top-left tooltip 113 | */ 114 | .#{$hintPrefix}top-left { 115 | @include vertical-positioned-tooltip('bottom', -1, -1); 116 | } 117 | 118 | 119 | /** 120 | * top-right tooltip 121 | */ 122 | .#{$hintPrefix}top-right { 123 | @include vertical-positioned-tooltip('bottom', -1, 1); 124 | } 125 | 126 | /** 127 | * bottom-left tooltip 128 | */ 129 | .#{$hintPrefix}bottom-left { 130 | @include vertical-positioned-tooltip('top', 1, -1); 131 | } 132 | 133 | 134 | /** 135 | * bottom-right tooltip 136 | */ 137 | .#{$hintPrefix}bottom-right { 138 | @include vertical-positioned-tooltip('top', 1, 1); 139 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Hint.css [![npm version](https://badge.fury.io/js/hint.css.svg)](https://badge.fury.io/js/hint.css) ![downloads/month](https://img.shields.io/npm/dm/hint.css.svg) [![Join the chat at https://gitter.im/chinchang/hint.css](https://badges.gitter.im/chinchang/hint.css.svg)](https://gitter.im/chinchang/hint.css?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [![Gratipay donate ](https://img.shields.io/badge/gratipay-donate-yellow.svg)](https://gratipay.com/~chinchang/) 2 | *A tooltip library in CSS for your lovely websites* 3 | 4 | [Demo](http://kushagragour.in/lab/hint/) • [Get started](#get-started) • [Who's using this?](#whos-using-this) • [Browser support](#browser-support) • [FAQs](#faqs) • [Contributing](#contributing) 5 | 6 | `hint.css` is written as a pure CSS resource using which you can create cool accessible tooltips for your web app. It does not rely on JavaScript but rather uses **aria-label**/**data-* attribute**, **pseudo elements**, **content property** and **CSS3 transitions** to create the tooltips. Also it uses **BEM** naming convention particularly for the modifiers. 7 | 8 | If you find this useful and want to show some love & encouragement, [I am on Gratipay](https://gratipay.com/~chinchang/). 9 | 10 | ## Get Started 11 | 12 | Get the library using one of the following ways: 13 | 14 | 1. **GitHub** 15 | 16 | Full build 17 | - [unminified] : https://raw.github.com/chinchang/hint.css/master/hint.css 18 | - [minified] : https://raw.github.com/chinchang/hint.css/master/hint.min.css 19 | 20 | Base build *(Does not include color themes and fancy effects)* 21 | - [unminified] : https://raw.github.com/chinchang/hint.css/master/hint.base.css 22 | - [minified] : https://raw.github.com/chinchang/hint.css/master/hint.base.min.css 23 | 24 | 2. **Bower** : `bower install hint.css` 25 | 26 | 3. **npm**: `npm install --save hint.css` 27 | 28 | 4. **CDN**: [http://www.jsdelivr.com/#!hint.css](http://www.jsdelivr.com/#!hint.css) or [https://cdnjs.com/libraries/hint.css](https://cdnjs.com/libraries/hint.css) 29 | 30 | Now include the library in the ``HEAD`` tag of your page: 31 | 32 | ```html 33 | 34 | ``` 35 | or 36 | 37 | ```html 38 | 39 | ``` 40 | 41 | Now, all you need to do is give your element any position class and tooltip text using the `aria-label` attribute. 42 | Note, if you don't want to use `aria-label` attribute, you can also specify the tooltip text using the `data-hint` attribute, but its recommended to use `aria-label` in support of accessibility. [Read more about aria-label](https://webaccessibility.withgoogle.com/unit?unit=6&lesson=10). 43 | 44 | 45 | ```html 46 | Hello Sir, hover me. 47 | ``` 48 | 49 | Use it with other available modifiers in various combinations. Available modifiers: 50 | - *Colors* - `hint--error`, `hint--info`, `hint--warning`, `hint--success` 51 | - *Sizes* - `hint--small`, `hint--medium`, `hint--large` 52 | - `hint--always` 53 | - `hint--rounded` 54 | - `hint--no-animate` 55 | - `hint--bounce` 56 | 57 | ## Upgrading from v1.x 58 | 59 | If you are already using v1.x, you may need to tweak certain position classes because of the way tooltips are positioned in v2. 60 | 61 | ## Changing the prefix for class names 62 | 63 | Don't like BEM naming (`hint--`) or want to use your own prefix for the class names? 64 | 65 | Simply update `src/hint-variables.scss` and change the `$hintPrefix` variable. 66 | To generate the css file, please read the [contributing page](./CONTRIBUTING.md). 67 | 68 | ## Who's Using This? 69 | - [Webflow Playground](http://playground.webflow.com/) 70 | - [Panda chrome app](http://usepanda.com/) 71 | - [Fiverr](https://www.fiverr.com/) 72 | - [Tolks](https://tolks.io) 73 | - [Tridiv](http://tridiv.com/) 74 | - [Prototyp](http://prototyp.in/) 75 | - [Tradus](http://tradus.com/) 76 | - [Formspree](http://formspree.io/) 77 | - [Stackshare](http://stackshare.io/) 78 | - [TypeScript Builder](http://www.typescriptbuilder.com/) 79 | - [codeMagic](http://codemagic.gr/) 80 | 81 | Are you using **hint.css** in your awesome project too? Just tweet it out to [@hint_css](https://twitter.com/hint_css) or let us know on the [mailing list](mailto:hintcss@googlegroups.com). 82 | 83 | ## Browser Support 84 | **hint.css** works on all latest browsers, though the transition effect is supported only on IE10+, Chrome 26+ and FF4+ at present. 85 | 86 | - Chrome - basic + transition effects 87 | - Firefox - basic + transition effects 88 | - Opera - basic 89 | - Safari - basic 90 | - IE 10+ - basic + transition effects 91 | - IE 8 & 9 - basic 92 | 93 | ### FAQs 94 | 95 | Checkout the [FAQ Wiki](https://github.com/chinchang/hint.css/wiki/Frequently-Asked-Questions) for some common gotchas to be aware of while using **hint.css**. 96 | 97 | ## Contributing 98 | `hint.css` is developed in SASS and the source files can be found in the `src/` directory. 99 | 100 | If you would like to create more types of tooltips/ fix bugs/ enhance the library etc. you are more than welcome to submit your pull requests. 101 | 102 | [Read more on contributing](./CONTRIBUTING.md). 103 | 104 | ## Changelog & Updates 105 | See the [Changelog](https://github.com/chinchang/hint.css/wiki/Changelog). 106 | 107 | To catch all updates and discussion, join the mailing list: [**hintcss@googlegroups.com**](https://groups.google.com/forum/?fromgroups=#!forum/hintcss). 108 | 109 | Or follow on twitter: [**@hint_css**](https://twitter.com/hint_css) 110 | 111 | ## License 112 | Copyright (c) 2013-2016 Kushagra Gour 113 | Licensed under the [MIT license](http://opensource.org/licenses/MIT). 114 | 115 | ## Credits 116 | This doesn't make use of a lot of BEM methodology but big thanks to [@csswizardry](https://twitter.com/csswizardry), [@necolas](https://twitter.com/necolas) for their awesome articles on BEM and to [@joshnh](https://twitter.com/_joshnh) through whose work I came to know about it :) 117 | -------------------------------------------------------------------------------- /hint.base.min.css: -------------------------------------------------------------------------------- 1 | /*! Hint.css (base version) - v2.3.2 - 2016-07-28 2 | * http://kushagragour.in/lab/hint/ 3 | * Copyright (c) 2016 Kushagra Gour; Licensed */ 4 | 5 | [class*=hint--]{position:relative;display:inline-block}[class*=hint--]:after,[class*=hint--]:before{position:absolute;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0);visibility:hidden;opacity:0;z-index:1000000;pointer-events:none;-webkit-transition:.3s ease;-moz-transition:.3s ease;transition:.3s ease;-webkit-transition-delay:0s;-moz-transition-delay:0s;transition-delay:0s}[class*=hint--]:hover:after,[class*=hint--]:hover:before{visibility:visible;opacity:1;-webkit-transition-delay:.1s;-moz-transition-delay:.1s;transition-delay:.1s}[class*=hint--]:before{content:'';position:absolute;background:0 0;border:6px solid transparent;z-index:1000001}[class*=hint--]:after{background:#383838;color:#fff;padding:8px 10px;font-size:12px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:12px;white-space:nowrap}[class*=hint--][aria-label]:after{content:attr(aria-label)}[class*=hint--][data-hint]:after{content:attr(data-hint)}[aria-label='']:after,[aria-label='']:before,[data-hint='']:after,[data-hint='']:before{display:none!important}.hint--top-left:before,.hint--top-right:before,.hint--top:before{border-top-color:#383838}.hint--bottom-left:before,.hint--bottom-right:before,.hint--bottom:before{border-bottom-color:#383838}.hint--top:after,.hint--top:before{bottom:100%;left:50%}.hint--top:before{margin-bottom:-11px;left:calc(50% - 6px)}.hint--top:after{-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);transform:translateX(-50%)}.hint--top:hover:before{-webkit-transform:translateY(-8px);-moz-transform:translateY(-8px);transform:translateY(-8px)}.hint--top:hover:after{-webkit-transform:translateX(-50%) translateY(-8px);-moz-transform:translateX(-50%) translateY(-8px);transform:translateX(-50%) translateY(-8px)}.hint--bottom:after,.hint--bottom:before{top:100%;left:50%}.hint--bottom:before{margin-top:-11px;left:calc(50% - 6px)}.hint--bottom:after{-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);transform:translateX(-50%)}.hint--bottom:hover:before{-webkit-transform:translateY(8px);-moz-transform:translateY(8px);transform:translateY(8px)}.hint--bottom:hover:after{-webkit-transform:translateX(-50%) translateY(8px);-moz-transform:translateX(-50%) translateY(8px);transform:translateX(-50%) translateY(8px)}.hint--right:before{border-right-color:#383838;margin-left:-11px;margin-bottom:-6px}.hint--right:after{margin-bottom:-14px}.hint--right:after,.hint--right:before{left:100%;bottom:50%}.hint--right:hover:after,.hint--right:hover:before{-webkit-transform:translateX(8px);-moz-transform:translateX(8px);transform:translateX(8px)}.hint--left:before{border-left-color:#383838;margin-right:-11px;margin-bottom:-6px}.hint--left:after{margin-bottom:-14px}.hint--left:after,.hint--left:before{right:100%;bottom:50%}.hint--left:hover:after,.hint--left:hover:before{-webkit-transform:translateX(-8px);-moz-transform:translateX(-8px);transform:translateX(-8px)}.hint--top-left:after,.hint--top-left:before{bottom:100%;left:50%}.hint--top-left:before{margin-bottom:-11px;left:calc(50% - 6px)}.hint--top-left:after{-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);transform:translateX(-100%);margin-left:12px}.hint--top-left:hover:before{-webkit-transform:translateY(-8px);-moz-transform:translateY(-8px);transform:translateY(-8px)}.hint--top-left:hover:after{-webkit-transform:translateX(-100%) translateY(-8px);-moz-transform:translateX(-100%) translateY(-8px);transform:translateX(-100%) translateY(-8px)}.hint--top-right:after,.hint--top-right:before{bottom:100%;left:50%}.hint--top-right:before{margin-bottom:-11px;left:calc(50% - 6px)}.hint--top-right:after{-webkit-transform:translateX(0);-moz-transform:translateX(0);transform:translateX(0);margin-left:-12px}.hint--top-right:hover:after,.hint--top-right:hover:before{-webkit-transform:translateY(-8px);-moz-transform:translateY(-8px);transform:translateY(-8px)}.hint--bottom-left:after,.hint--bottom-left:before{top:100%;left:50%}.hint--bottom-left:before{margin-top:-11px;left:calc(50% - 6px)}.hint--bottom-left:after{-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);transform:translateX(-100%);margin-left:12px}.hint--bottom-left:hover:before{-webkit-transform:translateY(8px);-moz-transform:translateY(8px);transform:translateY(8px)}.hint--bottom-left:hover:after{-webkit-transform:translateX(-100%) translateY(8px);-moz-transform:translateX(-100%) translateY(8px);transform:translateX(-100%) translateY(8px)}.hint--bottom-right:after,.hint--bottom-right:before{top:100%;left:50%}.hint--bottom-right:before{margin-top:-11px;left:calc(50% - 6px)}.hint--bottom-right:after{-webkit-transform:translateX(0);-moz-transform:translateX(0);transform:translateX(0);margin-left:-12px}.hint--bottom-right:hover:after,.hint--bottom-right:hover:before{-webkit-transform:translateY(8px);-moz-transform:translateY(8px);transform:translateY(8px)}.hint--large:after,.hint--medium:after,.hint--small:after{white-space:normal;line-height:1.4em;word-wrap:break-word}.hint--small:after{width:80px}.hint--medium:after{width:150px}.hint--large:after{width:300px}.hint--always:after,.hint--always:before{opacity:1;visibility:visible}.hint--always.hint--top:before{-webkit-transform:translateY(-8px);-moz-transform:translateY(-8px);transform:translateY(-8px)}.hint--always.hint--top:after{-webkit-transform:translateX(-50%) translateY(-8px);-moz-transform:translateX(-50%) translateY(-8px);transform:translateX(-50%) translateY(-8px)}.hint--always.hint--top-left:before{-webkit-transform:translateY(-8px);-moz-transform:translateY(-8px);transform:translateY(-8px)}.hint--always.hint--top-left:after{-webkit-transform:translateX(-100%) translateY(-8px);-moz-transform:translateX(-100%) translateY(-8px);transform:translateX(-100%) translateY(-8px)}.hint--always.hint--top-right:after,.hint--always.hint--top-right:before{-webkit-transform:translateY(-8px);-moz-transform:translateY(-8px);transform:translateY(-8px)}.hint--always.hint--bottom:before{-webkit-transform:translateY(8px);-moz-transform:translateY(8px);transform:translateY(8px)}.hint--always.hint--bottom:after{-webkit-transform:translateX(-50%) translateY(8px);-moz-transform:translateX(-50%) translateY(8px);transform:translateX(-50%) translateY(8px)}.hint--always.hint--bottom-left:before{-webkit-transform:translateY(8px);-moz-transform:translateY(8px);transform:translateY(8px)}.hint--always.hint--bottom-left:after{-webkit-transform:translateX(-100%) translateY(8px);-moz-transform:translateX(-100%) translateY(8px);transform:translateX(-100%) translateY(8px)}.hint--always.hint--bottom-right:after,.hint--always.hint--bottom-right:before{-webkit-transform:translateY(8px);-moz-transform:translateY(8px);transform:translateY(8px)}.hint--always.hint--left:after,.hint--always.hint--left:before{-webkit-transform:translateX(-8px);-moz-transform:translateX(-8px);transform:translateX(-8px)}.hint--always.hint--right:after,.hint--always.hint--right:before{-webkit-transform:translateX(8px);-moz-transform:translateX(8px);transform:translateX(8px)} -------------------------------------------------------------------------------- /hint.min.css: -------------------------------------------------------------------------------- 1 | /*! Hint.css - v2.3.2 - 2016-07-28 2 | * http://kushagragour.in/lab/hint/ 3 | * Copyright (c) 2016 Kushagra Gour; Licensed */ 4 | 5 | [class*=hint--]{position:relative;display:inline-block}[class*=hint--]:after,[class*=hint--]:before{position:absolute;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0);visibility:hidden;opacity:0;z-index:1000000;pointer-events:none;-webkit-transition:.3s ease;-moz-transition:.3s ease;transition:.3s ease;-webkit-transition-delay:0s;-moz-transition-delay:0s;transition-delay:0s}[class*=hint--]:hover:after,[class*=hint--]:hover:before{visibility:visible;opacity:1;-webkit-transition-delay:.1s;-moz-transition-delay:.1s;transition-delay:.1s}[class*=hint--]:before{content:'';position:absolute;background:0 0;border:6px solid transparent;z-index:1000001}[class*=hint--]:after{background:#383838;color:#fff;padding:8px 10px;font-size:12px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:12px;white-space:nowrap;text-shadow:0 -1px 0 #000;box-shadow:4px 4px 8px rgba(0,0,0,.3)}[class*=hint--][aria-label]:after{content:attr(aria-label)}[class*=hint--][data-hint]:after{content:attr(data-hint)}[aria-label='']:after,[aria-label='']:before,[data-hint='']:after,[data-hint='']:before{display:none!important}.hint--top-left:before,.hint--top-right:before,.hint--top:before{border-top-color:#383838}.hint--bottom-left:before,.hint--bottom-right:before,.hint--bottom:before{border-bottom-color:#383838}.hint--top:after,.hint--top:before{bottom:100%;left:50%}.hint--top:before{margin-bottom:-11px;left:calc(50% - 6px)}.hint--top:after{-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);transform:translateX(-50%)}.hint--top:hover:before{-webkit-transform:translateY(-8px);-moz-transform:translateY(-8px);transform:translateY(-8px)}.hint--top:hover:after{-webkit-transform:translateX(-50%) translateY(-8px);-moz-transform:translateX(-50%) translateY(-8px);transform:translateX(-50%) translateY(-8px)}.hint--bottom:after,.hint--bottom:before{top:100%;left:50%}.hint--bottom:before{margin-top:-11px;left:calc(50% - 6px)}.hint--bottom:after{-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);transform:translateX(-50%)}.hint--bottom:hover:before{-webkit-transform:translateY(8px);-moz-transform:translateY(8px);transform:translateY(8px)}.hint--bottom:hover:after{-webkit-transform:translateX(-50%) translateY(8px);-moz-transform:translateX(-50%) translateY(8px);transform:translateX(-50%) translateY(8px)}.hint--right:before{border-right-color:#383838;margin-left:-11px;margin-bottom:-6px}.hint--right:after{margin-bottom:-14px}.hint--right:after,.hint--right:before{left:100%;bottom:50%}.hint--right:hover:after,.hint--right:hover:before{-webkit-transform:translateX(8px);-moz-transform:translateX(8px);transform:translateX(8px)}.hint--left:before{border-left-color:#383838;margin-right:-11px;margin-bottom:-6px}.hint--left:after{margin-bottom:-14px}.hint--left:after,.hint--left:before{right:100%;bottom:50%}.hint--left:hover:after,.hint--left:hover:before{-webkit-transform:translateX(-8px);-moz-transform:translateX(-8px);transform:translateX(-8px)}.hint--top-left:after,.hint--top-left:before{bottom:100%;left:50%}.hint--top-left:before{margin-bottom:-11px;left:calc(50% - 6px)}.hint--top-left:after{-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);transform:translateX(-100%);margin-left:12px}.hint--top-left:hover:before{-webkit-transform:translateY(-8px);-moz-transform:translateY(-8px);transform:translateY(-8px)}.hint--top-left:hover:after{-webkit-transform:translateX(-100%) translateY(-8px);-moz-transform:translateX(-100%) translateY(-8px);transform:translateX(-100%) translateY(-8px)}.hint--top-right:after,.hint--top-right:before{bottom:100%;left:50%}.hint--top-right:before{margin-bottom:-11px;left:calc(50% - 6px)}.hint--top-right:after{-webkit-transform:translateX(0);-moz-transform:translateX(0);transform:translateX(0);margin-left:-12px}.hint--top-right:hover:after,.hint--top-right:hover:before{-webkit-transform:translateY(-8px);-moz-transform:translateY(-8px);transform:translateY(-8px)}.hint--bottom-left:after,.hint--bottom-left:before{top:100%;left:50%}.hint--bottom-left:before{margin-top:-11px;left:calc(50% - 6px)}.hint--bottom-left:after{-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);transform:translateX(-100%);margin-left:12px}.hint--bottom-left:hover:before{-webkit-transform:translateY(8px);-moz-transform:translateY(8px);transform:translateY(8px)}.hint--bottom-left:hover:after{-webkit-transform:translateX(-100%) translateY(8px);-moz-transform:translateX(-100%) translateY(8px);transform:translateX(-100%) translateY(8px)}.hint--bottom-right:after,.hint--bottom-right:before{top:100%;left:50%}.hint--bottom-right:before{margin-top:-11px;left:calc(50% - 6px)}.hint--bottom-right:after{-webkit-transform:translateX(0);-moz-transform:translateX(0);transform:translateX(0);margin-left:-12px}.hint--bottom-right:hover:after,.hint--bottom-right:hover:before{-webkit-transform:translateY(8px);-moz-transform:translateY(8px);transform:translateY(8px)}.hint--large:after,.hint--medium:after,.hint--small:after{white-space:normal;line-height:1.4em;word-wrap:break-word}.hint--small:after{width:80px}.hint--medium:after{width:150px}.hint--large:after{width:300px}.hint--error:after{background-color:#b34e4d;text-shadow:0 -1px 0 #592726}.hint--error.hint--top-left:before,.hint--error.hint--top-right:before,.hint--error.hint--top:before{border-top-color:#b34e4d}.hint--error.hint--bottom-left:before,.hint--error.hint--bottom-right:before,.hint--error.hint--bottom:before{border-bottom-color:#b34e4d}.hint--error.hint--left:before{border-left-color:#b34e4d}.hint--error.hint--right:before{border-right-color:#b34e4d}.hint--warning:after{background-color:#c09854;text-shadow:0 -1px 0 #6c5328}.hint--warning.hint--top-left:before,.hint--warning.hint--top-right:before,.hint--warning.hint--top:before{border-top-color:#c09854}.hint--warning.hint--bottom-left:before,.hint--warning.hint--bottom-right:before,.hint--warning.hint--bottom:before{border-bottom-color:#c09854}.hint--warning.hint--left:before{border-left-color:#c09854}.hint--warning.hint--right:before{border-right-color:#c09854}.hint--info:after{background-color:#3986ac;text-shadow:0 -1px 0 #1a3c4d}.hint--info.hint--top-left:before,.hint--info.hint--top-right:before,.hint--info.hint--top:before{border-top-color:#3986ac}.hint--info.hint--bottom-left:before,.hint--info.hint--bottom-right:before,.hint--info.hint--bottom:before{border-bottom-color:#3986ac}.hint--info.hint--left:before{border-left-color:#3986ac}.hint--info.hint--right:before{border-right-color:#3986ac}.hint--success:after{background-color:#458746;text-shadow:0 -1px 0 #1a321a}.hint--success.hint--top-left:before,.hint--success.hint--top-right:before,.hint--success.hint--top:before{border-top-color:#458746}.hint--success.hint--bottom-left:before,.hint--success.hint--bottom-right:before,.hint--success.hint--bottom:before{border-bottom-color:#458746}.hint--success.hint--left:before{border-left-color:#458746}.hint--success.hint--right:before{border-right-color:#458746}.hint--always:after,.hint--always:before{opacity:1;visibility:visible}.hint--always.hint--top:before{-webkit-transform:translateY(-8px);-moz-transform:translateY(-8px);transform:translateY(-8px)}.hint--always.hint--top:after{-webkit-transform:translateX(-50%) translateY(-8px);-moz-transform:translateX(-50%) translateY(-8px);transform:translateX(-50%) translateY(-8px)}.hint--always.hint--top-left:before{-webkit-transform:translateY(-8px);-moz-transform:translateY(-8px);transform:translateY(-8px)}.hint--always.hint--top-left:after{-webkit-transform:translateX(-100%) translateY(-8px);-moz-transform:translateX(-100%) translateY(-8px);transform:translateX(-100%) translateY(-8px)}.hint--always.hint--top-right:after,.hint--always.hint--top-right:before{-webkit-transform:translateY(-8px);-moz-transform:translateY(-8px);transform:translateY(-8px)}.hint--always.hint--bottom:before{-webkit-transform:translateY(8px);-moz-transform:translateY(8px);transform:translateY(8px)}.hint--always.hint--bottom:after{-webkit-transform:translateX(-50%) translateY(8px);-moz-transform:translateX(-50%) translateY(8px);transform:translateX(-50%) translateY(8px)}.hint--always.hint--bottom-left:before{-webkit-transform:translateY(8px);-moz-transform:translateY(8px);transform:translateY(8px)}.hint--always.hint--bottom-left:after{-webkit-transform:translateX(-100%) translateY(8px);-moz-transform:translateX(-100%) translateY(8px);transform:translateX(-100%) translateY(8px)}.hint--always.hint--bottom-right:after,.hint--always.hint--bottom-right:before{-webkit-transform:translateY(8px);-moz-transform:translateY(8px);transform:translateY(8px)}.hint--always.hint--left:after,.hint--always.hint--left:before{-webkit-transform:translateX(-8px);-moz-transform:translateX(-8px);transform:translateX(-8px)}.hint--always.hint--right:after,.hint--always.hint--right:before{-webkit-transform:translateX(8px);-moz-transform:translateX(8px);transform:translateX(8px)}.hint--rounded:after{border-radius:4px}.hint--no-animate:after,.hint--no-animate:before{-webkit-transition-duration:0s;-moz-transition-duration:0s;transition-duration:0s}.hint--bounce:after,.hint--bounce:before{-webkit-transition:opacity .3s ease,visibility .3s ease,-webkit-transform .3s cubic-bezier(.71,1.7,.77,1.24);-moz-transition:opacity .3s ease,visibility .3s ease,-moz-transform .3s cubic-bezier(.71,1.7,.77,1.24);transition:opacity .3s ease,visibility .3s ease,transform .3s cubic-bezier(.71,1.7,.77,1.24)} -------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hint.css - A tooltip library in CSS 7 | 8 | 9 | 10 | 11 | 12 | 13 | 248 | 249 | 250 | 251 | 252 |
253 | 254 |

Hint.css 2.0

255 |

A pure CSS tooltip library for your lovely websites

256 |
257 |
258 | 259 |
260 |

Tryout

261 | 262 |
263 |
264 |
265 | 266 | 267 | 268 |
269 | Try hovering over different things 270 |
271 |
272 |
273 |
bottom-right
274 |
bottom
275 |
bottom-left
276 |
right
277 |
.
278 |
left
279 |
top-right
280 |
top
281 |
top-left
282 |
283 | 284 |

Color Modifiers

285 |

286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 | 306 |

307 | 308 |

Size variations

309 | 310 |

311 | 312 | Small 313 | 314 | 315 | 316 | Medium 317 | 318 | 319 | 320 | Large 321 | 322 |

323 | 324 | 325 |

Extra

326 | 327 |

328 | You can also make tooltips... 329 |

330 | 331 |

332 | Hmm...So you don't like sharp edges? 333 |

334 | 335 |

Effects

336 | 337 |

338 | Dont like animation? 339 |

340 |

341 | Adding a hint--bounce class gives you that... 342 |

343 |
344 |
345 | 346 |
347 | Upgrading from v1.x: If you are already using v1.x, you may need to tweak certain position classes because of the way tooltips are positioned in v2. 348 |
349 | Its recommended to use aria-label attribute to specify your tooltip text in support of accessibility. Though, you can always use data-hint attribute instead. Read more about aria-label here. 350 | 351 |
352 |
353 | 354 |
355 | Made with hands by Kushagra Gour in India 356 |
357 | 358 | 359 | 360 | -------------------------------------------------------------------------------- /hint.base.css: -------------------------------------------------------------------------------- 1 | /*! Hint.css (base version) - v2.3.2 - 2016-07-28 2 | * http://kushagragour.in/lab/hint/ 3 | * Copyright (c) 2016 Kushagra Gour; Licensed */ 4 | 5 | /*-------------------------------------* HINT.css - A CSS tooltip library 6 | \*-------------------------------------*/ 7 | /** 8 | * HINT.css is a tooltip library made in pure CSS. 9 | * 10 | * Source: https://github.com/chinchang/hint.css 11 | * Demo: http://kushagragour.in/lab/hint/ 12 | * 13 | * Release under The MIT License 14 | * 15 | */ 16 | /** 17 | * source: hint-core.scss 18 | * 19 | * Defines the basic styling for the tooltip. 20 | * Each tooltip is made of 2 parts: 21 | * 1) body (:after) 22 | * 2) arrow (:before) 23 | * 24 | * Classes added: 25 | * 1) hint 26 | */ 27 | [class*="hint--"] { 28 | position: relative; 29 | display: inline-block; 30 | /** 31 | * tooltip arrow 32 | */ 33 | /** 34 | * tooltip body 35 | */ } 36 | [class*="hint--"]:before, [class*="hint--"]:after { 37 | position: absolute; 38 | -webkit-transform: translate3d(0, 0, 0); 39 | -moz-transform: translate3d(0, 0, 0); 40 | transform: translate3d(0, 0, 0); 41 | visibility: hidden; 42 | opacity: 0; 43 | z-index: 1000000; 44 | pointer-events: none; 45 | -webkit-transition: 0.3s ease; 46 | -moz-transition: 0.3s ease; 47 | transition: 0.3s ease; 48 | -webkit-transition-delay: 0ms; 49 | -moz-transition-delay: 0ms; 50 | transition-delay: 0ms; } 51 | [class*="hint--"]:hover:before, [class*="hint--"]:hover:after { 52 | visibility: visible; 53 | opacity: 1; } 54 | [class*="hint--"]:hover:before, [class*="hint--"]:hover:after { 55 | -webkit-transition-delay: 100ms; 56 | -moz-transition-delay: 100ms; 57 | transition-delay: 100ms; } 58 | [class*="hint--"]:before { 59 | content: ''; 60 | position: absolute; 61 | background: transparent; 62 | border: 6px solid transparent; 63 | z-index: 1000001; } 64 | [class*="hint--"]:after { 65 | background: #383838; 66 | color: white; 67 | padding: 8px 10px; 68 | font-size: 12px; 69 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 70 | line-height: 12px; 71 | white-space: nowrap; } 72 | [class*="hint--"][aria-label]:after { 73 | content: attr(aria-label); } 74 | [class*="hint--"][data-hint]:after { 75 | content: attr(data-hint); } 76 | 77 | [aria-label='']:before, [aria-label='']:after, 78 | [data-hint='']:before, 79 | [data-hint='']:after { 80 | display: none !important; } 81 | 82 | /** 83 | * source: hint-position.scss 84 | * 85 | * Defines the positoning logic for the tooltips. 86 | * 87 | * Classes added: 88 | * 1) hint--top 89 | * 2) hint--bottom 90 | * 3) hint--left 91 | * 4) hint--right 92 | */ 93 | /** 94 | * set default color for tooltip arrows 95 | */ 96 | .hint--top-left:before { 97 | border-top-color: #383838; } 98 | 99 | .hint--top-right:before { 100 | border-top-color: #383838; } 101 | 102 | .hint--top:before { 103 | border-top-color: #383838; } 104 | 105 | .hint--bottom-left:before { 106 | border-bottom-color: #383838; } 107 | 108 | .hint--bottom-right:before { 109 | border-bottom-color: #383838; } 110 | 111 | .hint--bottom:before { 112 | border-bottom-color: #383838; } 113 | 114 | .hint--left:before { 115 | border-left-color: #383838; } 116 | 117 | .hint--right:before { 118 | border-right-color: #383838; } 119 | 120 | /** 121 | * top tooltip 122 | */ 123 | .hint--top:before { 124 | margin-bottom: -11px; } 125 | 126 | .hint--top:before, .hint--top:after { 127 | bottom: 100%; 128 | left: 50%; } 129 | 130 | .hint--top:before { 131 | left: calc(50% - 6px); } 132 | 133 | .hint--top:after { 134 | -webkit-transform: translateX(-50%); 135 | -moz-transform: translateX(-50%); 136 | transform: translateX(-50%); } 137 | 138 | .hint--top:hover:before { 139 | -webkit-transform: translateY(-8px); 140 | -moz-transform: translateY(-8px); 141 | transform: translateY(-8px); } 142 | 143 | .hint--top:hover:after { 144 | -webkit-transform: translateX(-50%) translateY(-8px); 145 | -moz-transform: translateX(-50%) translateY(-8px); 146 | transform: translateX(-50%) translateY(-8px); } 147 | 148 | /** 149 | * bottom tooltip 150 | */ 151 | .hint--bottom:before { 152 | margin-top: -11px; } 153 | 154 | .hint--bottom:before, .hint--bottom:after { 155 | top: 100%; 156 | left: 50%; } 157 | 158 | .hint--bottom:before { 159 | left: calc(50% - 6px); } 160 | 161 | .hint--bottom:after { 162 | -webkit-transform: translateX(-50%); 163 | -moz-transform: translateX(-50%); 164 | transform: translateX(-50%); } 165 | 166 | .hint--bottom:hover:before { 167 | -webkit-transform: translateY(8px); 168 | -moz-transform: translateY(8px); 169 | transform: translateY(8px); } 170 | 171 | .hint--bottom:hover:after { 172 | -webkit-transform: translateX(-50%) translateY(8px); 173 | -moz-transform: translateX(-50%) translateY(8px); 174 | transform: translateX(-50%) translateY(8px); } 175 | 176 | /** 177 | * right tooltip 178 | */ 179 | .hint--right:before { 180 | margin-left: -11px; 181 | margin-bottom: -6px; } 182 | 183 | .hint--right:after { 184 | margin-bottom: -14px; } 185 | 186 | .hint--right:before, .hint--right:after { 187 | left: 100%; 188 | bottom: 50%; } 189 | 190 | .hint--right:hover:before { 191 | -webkit-transform: translateX(8px); 192 | -moz-transform: translateX(8px); 193 | transform: translateX(8px); } 194 | 195 | .hint--right:hover:after { 196 | -webkit-transform: translateX(8px); 197 | -moz-transform: translateX(8px); 198 | transform: translateX(8px); } 199 | 200 | /** 201 | * left tooltip 202 | */ 203 | .hint--left:before { 204 | margin-right: -11px; 205 | margin-bottom: -6px; } 206 | 207 | .hint--left:after { 208 | margin-bottom: -14px; } 209 | 210 | .hint--left:before, .hint--left:after { 211 | right: 100%; 212 | bottom: 50%; } 213 | 214 | .hint--left:hover:before { 215 | -webkit-transform: translateX(-8px); 216 | -moz-transform: translateX(-8px); 217 | transform: translateX(-8px); } 218 | 219 | .hint--left:hover:after { 220 | -webkit-transform: translateX(-8px); 221 | -moz-transform: translateX(-8px); 222 | transform: translateX(-8px); } 223 | 224 | /** 225 | * top-left tooltip 226 | */ 227 | .hint--top-left:before { 228 | margin-bottom: -11px; } 229 | 230 | .hint--top-left:before, .hint--top-left:after { 231 | bottom: 100%; 232 | left: 50%; } 233 | 234 | .hint--top-left:before { 235 | left: calc(50% - 6px); } 236 | 237 | .hint--top-left:after { 238 | -webkit-transform: translateX(-100%); 239 | -moz-transform: translateX(-100%); 240 | transform: translateX(-100%); } 241 | 242 | .hint--top-left:after { 243 | margin-left: 12px; } 244 | 245 | .hint--top-left:hover:before { 246 | -webkit-transform: translateY(-8px); 247 | -moz-transform: translateY(-8px); 248 | transform: translateY(-8px); } 249 | 250 | .hint--top-left:hover:after { 251 | -webkit-transform: translateX(-100%) translateY(-8px); 252 | -moz-transform: translateX(-100%) translateY(-8px); 253 | transform: translateX(-100%) translateY(-8px); } 254 | 255 | /** 256 | * top-right tooltip 257 | */ 258 | .hint--top-right:before { 259 | margin-bottom: -11px; } 260 | 261 | .hint--top-right:before, .hint--top-right:after { 262 | bottom: 100%; 263 | left: 50%; } 264 | 265 | .hint--top-right:before { 266 | left: calc(50% - 6px); } 267 | 268 | .hint--top-right:after { 269 | -webkit-transform: translateX(0); 270 | -moz-transform: translateX(0); 271 | transform: translateX(0); } 272 | 273 | .hint--top-right:after { 274 | margin-left: -12px; } 275 | 276 | .hint--top-right:hover:before { 277 | -webkit-transform: translateY(-8px); 278 | -moz-transform: translateY(-8px); 279 | transform: translateY(-8px); } 280 | 281 | .hint--top-right:hover:after { 282 | -webkit-transform: translateY(-8px); 283 | -moz-transform: translateY(-8px); 284 | transform: translateY(-8px); } 285 | 286 | /** 287 | * bottom-left tooltip 288 | */ 289 | .hint--bottom-left:before { 290 | margin-top: -11px; } 291 | 292 | .hint--bottom-left:before, .hint--bottom-left:after { 293 | top: 100%; 294 | left: 50%; } 295 | 296 | .hint--bottom-left:before { 297 | left: calc(50% - 6px); } 298 | 299 | .hint--bottom-left:after { 300 | -webkit-transform: translateX(-100%); 301 | -moz-transform: translateX(-100%); 302 | transform: translateX(-100%); } 303 | 304 | .hint--bottom-left:after { 305 | margin-left: 12px; } 306 | 307 | .hint--bottom-left:hover:before { 308 | -webkit-transform: translateY(8px); 309 | -moz-transform: translateY(8px); 310 | transform: translateY(8px); } 311 | 312 | .hint--bottom-left:hover:after { 313 | -webkit-transform: translateX(-100%) translateY(8px); 314 | -moz-transform: translateX(-100%) translateY(8px); 315 | transform: translateX(-100%) translateY(8px); } 316 | 317 | /** 318 | * bottom-right tooltip 319 | */ 320 | .hint--bottom-right:before { 321 | margin-top: -11px; } 322 | 323 | .hint--bottom-right:before, .hint--bottom-right:after { 324 | top: 100%; 325 | left: 50%; } 326 | 327 | .hint--bottom-right:before { 328 | left: calc(50% - 6px); } 329 | 330 | .hint--bottom-right:after { 331 | -webkit-transform: translateX(0); 332 | -moz-transform: translateX(0); 333 | transform: translateX(0); } 334 | 335 | .hint--bottom-right:after { 336 | margin-left: -12px; } 337 | 338 | .hint--bottom-right:hover:before { 339 | -webkit-transform: translateY(8px); 340 | -moz-transform: translateY(8px); 341 | transform: translateY(8px); } 342 | 343 | .hint--bottom-right:hover:after { 344 | -webkit-transform: translateY(8px); 345 | -moz-transform: translateY(8px); 346 | transform: translateY(8px); } 347 | 348 | /** 349 | * source: hint-sizes.scss 350 | * 351 | * Defines width restricted tooltips that can span 352 | * across multiple lines. 353 | * 354 | * Classes added: 355 | * 1) hint--small 356 | * 2) hint--medium 357 | * 3) hint--large 358 | * 359 | */ 360 | .hint--small:after, 361 | .hint--medium:after, 362 | .hint--large:after { 363 | white-space: normal; 364 | line-height: 1.4em; 365 | word-wrap: break-word; } 366 | 367 | .hint--small:after { 368 | width: 80px; } 369 | 370 | .hint--medium:after { 371 | width: 150px; } 372 | 373 | .hint--large:after { 374 | width: 300px; } 375 | 376 | /** 377 | * source: hint-always.scss 378 | * 379 | * Defines a persisted tooltip which shows always. 380 | * 381 | * Classes added: 382 | * 1) hint--always 383 | * 384 | */ 385 | .hint--always:after, .hint--always:before { 386 | opacity: 1; 387 | visibility: visible; } 388 | 389 | .hint--always.hint--top:before { 390 | -webkit-transform: translateY(-8px); 391 | -moz-transform: translateY(-8px); 392 | transform: translateY(-8px); } 393 | 394 | .hint--always.hint--top:after { 395 | -webkit-transform: translateX(-50%) translateY(-8px); 396 | -moz-transform: translateX(-50%) translateY(-8px); 397 | transform: translateX(-50%) translateY(-8px); } 398 | 399 | .hint--always.hint--top-left:before { 400 | -webkit-transform: translateY(-8px); 401 | -moz-transform: translateY(-8px); 402 | transform: translateY(-8px); } 403 | 404 | .hint--always.hint--top-left:after { 405 | -webkit-transform: translateX(-100%) translateY(-8px); 406 | -moz-transform: translateX(-100%) translateY(-8px); 407 | transform: translateX(-100%) translateY(-8px); } 408 | 409 | .hint--always.hint--top-right:before { 410 | -webkit-transform: translateY(-8px); 411 | -moz-transform: translateY(-8px); 412 | transform: translateY(-8px); } 413 | 414 | .hint--always.hint--top-right:after { 415 | -webkit-transform: translateY(-8px); 416 | -moz-transform: translateY(-8px); 417 | transform: translateY(-8px); } 418 | 419 | .hint--always.hint--bottom:before { 420 | -webkit-transform: translateY(8px); 421 | -moz-transform: translateY(8px); 422 | transform: translateY(8px); } 423 | 424 | .hint--always.hint--bottom:after { 425 | -webkit-transform: translateX(-50%) translateY(8px); 426 | -moz-transform: translateX(-50%) translateY(8px); 427 | transform: translateX(-50%) translateY(8px); } 428 | 429 | .hint--always.hint--bottom-left:before { 430 | -webkit-transform: translateY(8px); 431 | -moz-transform: translateY(8px); 432 | transform: translateY(8px); } 433 | 434 | .hint--always.hint--bottom-left:after { 435 | -webkit-transform: translateX(-100%) translateY(8px); 436 | -moz-transform: translateX(-100%) translateY(8px); 437 | transform: translateX(-100%) translateY(8px); } 438 | 439 | .hint--always.hint--bottom-right:before { 440 | -webkit-transform: translateY(8px); 441 | -moz-transform: translateY(8px); 442 | transform: translateY(8px); } 443 | 444 | .hint--always.hint--bottom-right:after { 445 | -webkit-transform: translateY(8px); 446 | -moz-transform: translateY(8px); 447 | transform: translateY(8px); } 448 | 449 | .hint--always.hint--left:before { 450 | -webkit-transform: translateX(-8px); 451 | -moz-transform: translateX(-8px); 452 | transform: translateX(-8px); } 453 | 454 | .hint--always.hint--left:after { 455 | -webkit-transform: translateX(-8px); 456 | -moz-transform: translateX(-8px); 457 | transform: translateX(-8px); } 458 | 459 | .hint--always.hint--right:before { 460 | -webkit-transform: translateX(8px); 461 | -moz-transform: translateX(8px); 462 | transform: translateX(8px); } 463 | 464 | .hint--always.hint--right:after { 465 | -webkit-transform: translateX(8px); 466 | -moz-transform: translateX(8px); 467 | transform: translateX(8px); } 468 | -------------------------------------------------------------------------------- /hint.css: -------------------------------------------------------------------------------- 1 | /*! Hint.css - v2.3.2 - 2016-07-28 2 | * http://kushagragour.in/lab/hint/ 3 | * Copyright (c) 2016 Kushagra Gour; Licensed */ 4 | 5 | /*-------------------------------------* HINT.css - A CSS tooltip library 6 | \*-------------------------------------*/ 7 | /** 8 | * HINT.css is a tooltip library made in pure CSS. 9 | * 10 | * Source: https://github.com/chinchang/hint.css 11 | * Demo: http://kushagragour.in/lab/hint/ 12 | * 13 | * Release under The MIT License 14 | * 15 | */ 16 | /** 17 | * source: hint-core.scss 18 | * 19 | * Defines the basic styling for the tooltip. 20 | * Each tooltip is made of 2 parts: 21 | * 1) body (:after) 22 | * 2) arrow (:before) 23 | * 24 | * Classes added: 25 | * 1) hint 26 | */ 27 | [class*="hint--"] { 28 | position: relative; 29 | display: inline-block; 30 | /** 31 | * tooltip arrow 32 | */ 33 | /** 34 | * tooltip body 35 | */ } 36 | [class*="hint--"]:before, [class*="hint--"]:after { 37 | position: absolute; 38 | -webkit-transform: translate3d(0, 0, 0); 39 | -moz-transform: translate3d(0, 0, 0); 40 | transform: translate3d(0, 0, 0); 41 | visibility: hidden; 42 | opacity: 0; 43 | z-index: 1000000; 44 | pointer-events: none; 45 | -webkit-transition: 0.3s ease; 46 | -moz-transition: 0.3s ease; 47 | transition: 0.3s ease; 48 | -webkit-transition-delay: 0ms; 49 | -moz-transition-delay: 0ms; 50 | transition-delay: 0ms; } 51 | [class*="hint--"]:hover:before, [class*="hint--"]:hover:after { 52 | visibility: visible; 53 | opacity: 1; } 54 | [class*="hint--"]:hover:before, [class*="hint--"]:hover:after { 55 | -webkit-transition-delay: 100ms; 56 | -moz-transition-delay: 100ms; 57 | transition-delay: 100ms; } 58 | [class*="hint--"]:before { 59 | content: ''; 60 | position: absolute; 61 | background: transparent; 62 | border: 6px solid transparent; 63 | z-index: 1000001; } 64 | [class*="hint--"]:after { 65 | background: #383838; 66 | color: white; 67 | padding: 8px 10px; 68 | font-size: 12px; 69 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 70 | line-height: 12px; 71 | white-space: nowrap; } 72 | [class*="hint--"][aria-label]:after { 73 | content: attr(aria-label); } 74 | [class*="hint--"][data-hint]:after { 75 | content: attr(data-hint); } 76 | 77 | [aria-label='']:before, [aria-label='']:after, 78 | [data-hint='']:before, 79 | [data-hint='']:after { 80 | display: none !important; } 81 | 82 | /** 83 | * source: hint-position.scss 84 | * 85 | * Defines the positoning logic for the tooltips. 86 | * 87 | * Classes added: 88 | * 1) hint--top 89 | * 2) hint--bottom 90 | * 3) hint--left 91 | * 4) hint--right 92 | */ 93 | /** 94 | * set default color for tooltip arrows 95 | */ 96 | .hint--top-left:before { 97 | border-top-color: #383838; } 98 | 99 | .hint--top-right:before { 100 | border-top-color: #383838; } 101 | 102 | .hint--top:before { 103 | border-top-color: #383838; } 104 | 105 | .hint--bottom-left:before { 106 | border-bottom-color: #383838; } 107 | 108 | .hint--bottom-right:before { 109 | border-bottom-color: #383838; } 110 | 111 | .hint--bottom:before { 112 | border-bottom-color: #383838; } 113 | 114 | .hint--left:before { 115 | border-left-color: #383838; } 116 | 117 | .hint--right:before { 118 | border-right-color: #383838; } 119 | 120 | /** 121 | * top tooltip 122 | */ 123 | .hint--top:before { 124 | margin-bottom: -11px; } 125 | 126 | .hint--top:before, .hint--top:after { 127 | bottom: 100%; 128 | left: 50%; } 129 | 130 | .hint--top:before { 131 | left: calc(50% - 6px); } 132 | 133 | .hint--top:after { 134 | -webkit-transform: translateX(-50%); 135 | -moz-transform: translateX(-50%); 136 | transform: translateX(-50%); } 137 | 138 | .hint--top:hover:before { 139 | -webkit-transform: translateY(-8px); 140 | -moz-transform: translateY(-8px); 141 | transform: translateY(-8px); } 142 | 143 | .hint--top:hover:after { 144 | -webkit-transform: translateX(-50%) translateY(-8px); 145 | -moz-transform: translateX(-50%) translateY(-8px); 146 | transform: translateX(-50%) translateY(-8px); } 147 | 148 | /** 149 | * bottom tooltip 150 | */ 151 | .hint--bottom:before { 152 | margin-top: -11px; } 153 | 154 | .hint--bottom:before, .hint--bottom:after { 155 | top: 100%; 156 | left: 50%; } 157 | 158 | .hint--bottom:before { 159 | left: calc(50% - 6px); } 160 | 161 | .hint--bottom:after { 162 | -webkit-transform: translateX(-50%); 163 | -moz-transform: translateX(-50%); 164 | transform: translateX(-50%); } 165 | 166 | .hint--bottom:hover:before { 167 | -webkit-transform: translateY(8px); 168 | -moz-transform: translateY(8px); 169 | transform: translateY(8px); } 170 | 171 | .hint--bottom:hover:after { 172 | -webkit-transform: translateX(-50%) translateY(8px); 173 | -moz-transform: translateX(-50%) translateY(8px); 174 | transform: translateX(-50%) translateY(8px); } 175 | 176 | /** 177 | * right tooltip 178 | */ 179 | .hint--right:before { 180 | margin-left: -11px; 181 | margin-bottom: -6px; } 182 | 183 | .hint--right:after { 184 | margin-bottom: -14px; } 185 | 186 | .hint--right:before, .hint--right:after { 187 | left: 100%; 188 | bottom: 50%; } 189 | 190 | .hint--right:hover:before { 191 | -webkit-transform: translateX(8px); 192 | -moz-transform: translateX(8px); 193 | transform: translateX(8px); } 194 | 195 | .hint--right:hover:after { 196 | -webkit-transform: translateX(8px); 197 | -moz-transform: translateX(8px); 198 | transform: translateX(8px); } 199 | 200 | /** 201 | * left tooltip 202 | */ 203 | .hint--left:before { 204 | margin-right: -11px; 205 | margin-bottom: -6px; } 206 | 207 | .hint--left:after { 208 | margin-bottom: -14px; } 209 | 210 | .hint--left:before, .hint--left:after { 211 | right: 100%; 212 | bottom: 50%; } 213 | 214 | .hint--left:hover:before { 215 | -webkit-transform: translateX(-8px); 216 | -moz-transform: translateX(-8px); 217 | transform: translateX(-8px); } 218 | 219 | .hint--left:hover:after { 220 | -webkit-transform: translateX(-8px); 221 | -moz-transform: translateX(-8px); 222 | transform: translateX(-8px); } 223 | 224 | /** 225 | * top-left tooltip 226 | */ 227 | .hint--top-left:before { 228 | margin-bottom: -11px; } 229 | 230 | .hint--top-left:before, .hint--top-left:after { 231 | bottom: 100%; 232 | left: 50%; } 233 | 234 | .hint--top-left:before { 235 | left: calc(50% - 6px); } 236 | 237 | .hint--top-left:after { 238 | -webkit-transform: translateX(-100%); 239 | -moz-transform: translateX(-100%); 240 | transform: translateX(-100%); } 241 | 242 | .hint--top-left:after { 243 | margin-left: 12px; } 244 | 245 | .hint--top-left:hover:before { 246 | -webkit-transform: translateY(-8px); 247 | -moz-transform: translateY(-8px); 248 | transform: translateY(-8px); } 249 | 250 | .hint--top-left:hover:after { 251 | -webkit-transform: translateX(-100%) translateY(-8px); 252 | -moz-transform: translateX(-100%) translateY(-8px); 253 | transform: translateX(-100%) translateY(-8px); } 254 | 255 | /** 256 | * top-right tooltip 257 | */ 258 | .hint--top-right:before { 259 | margin-bottom: -11px; } 260 | 261 | .hint--top-right:before, .hint--top-right:after { 262 | bottom: 100%; 263 | left: 50%; } 264 | 265 | .hint--top-right:before { 266 | left: calc(50% - 6px); } 267 | 268 | .hint--top-right:after { 269 | -webkit-transform: translateX(0); 270 | -moz-transform: translateX(0); 271 | transform: translateX(0); } 272 | 273 | .hint--top-right:after { 274 | margin-left: -12px; } 275 | 276 | .hint--top-right:hover:before { 277 | -webkit-transform: translateY(-8px); 278 | -moz-transform: translateY(-8px); 279 | transform: translateY(-8px); } 280 | 281 | .hint--top-right:hover:after { 282 | -webkit-transform: translateY(-8px); 283 | -moz-transform: translateY(-8px); 284 | transform: translateY(-8px); } 285 | 286 | /** 287 | * bottom-left tooltip 288 | */ 289 | .hint--bottom-left:before { 290 | margin-top: -11px; } 291 | 292 | .hint--bottom-left:before, .hint--bottom-left:after { 293 | top: 100%; 294 | left: 50%; } 295 | 296 | .hint--bottom-left:before { 297 | left: calc(50% - 6px); } 298 | 299 | .hint--bottom-left:after { 300 | -webkit-transform: translateX(-100%); 301 | -moz-transform: translateX(-100%); 302 | transform: translateX(-100%); } 303 | 304 | .hint--bottom-left:after { 305 | margin-left: 12px; } 306 | 307 | .hint--bottom-left:hover:before { 308 | -webkit-transform: translateY(8px); 309 | -moz-transform: translateY(8px); 310 | transform: translateY(8px); } 311 | 312 | .hint--bottom-left:hover:after { 313 | -webkit-transform: translateX(-100%) translateY(8px); 314 | -moz-transform: translateX(-100%) translateY(8px); 315 | transform: translateX(-100%) translateY(8px); } 316 | 317 | /** 318 | * bottom-right tooltip 319 | */ 320 | .hint--bottom-right:before { 321 | margin-top: -11px; } 322 | 323 | .hint--bottom-right:before, .hint--bottom-right:after { 324 | top: 100%; 325 | left: 50%; } 326 | 327 | .hint--bottom-right:before { 328 | left: calc(50% - 6px); } 329 | 330 | .hint--bottom-right:after { 331 | -webkit-transform: translateX(0); 332 | -moz-transform: translateX(0); 333 | transform: translateX(0); } 334 | 335 | .hint--bottom-right:after { 336 | margin-left: -12px; } 337 | 338 | .hint--bottom-right:hover:before { 339 | -webkit-transform: translateY(8px); 340 | -moz-transform: translateY(8px); 341 | transform: translateY(8px); } 342 | 343 | .hint--bottom-right:hover:after { 344 | -webkit-transform: translateY(8px); 345 | -moz-transform: translateY(8px); 346 | transform: translateY(8px); } 347 | 348 | /** 349 | * source: hint-sizes.scss 350 | * 351 | * Defines width restricted tooltips that can span 352 | * across multiple lines. 353 | * 354 | * Classes added: 355 | * 1) hint--small 356 | * 2) hint--medium 357 | * 3) hint--large 358 | * 359 | */ 360 | .hint--small:after, 361 | .hint--medium:after, 362 | .hint--large:after { 363 | white-space: normal; 364 | line-height: 1.4em; 365 | word-wrap: break-word; } 366 | 367 | .hint--small:after { 368 | width: 80px; } 369 | 370 | .hint--medium:after { 371 | width: 150px; } 372 | 373 | .hint--large:after { 374 | width: 300px; } 375 | 376 | /** 377 | * source: hint-theme.scss 378 | * 379 | * Defines basic theme for tooltips. 380 | * 381 | */ 382 | [class*="hint--"] { 383 | /** 384 | * tooltip body 385 | */ } 386 | [class*="hint--"]:after { 387 | text-shadow: 0 -1px 0px black; 388 | box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); } 389 | 390 | /** 391 | * source: hint-color-types.scss 392 | * 393 | * Contains tooltips of various types based on color differences. 394 | * 395 | * Classes added: 396 | * 1) hint--error 397 | * 2) hint--warning 398 | * 3) hint--info 399 | * 4) hint--success 400 | * 401 | */ 402 | /** 403 | * Error 404 | */ 405 | .hint--error:after { 406 | background-color: #b34e4d; 407 | text-shadow: 0 -1px 0px #592726; } 408 | 409 | .hint--error.hint--top-left:before { 410 | border-top-color: #b34e4d; } 411 | 412 | .hint--error.hint--top-right:before { 413 | border-top-color: #b34e4d; } 414 | 415 | .hint--error.hint--top:before { 416 | border-top-color: #b34e4d; } 417 | 418 | .hint--error.hint--bottom-left:before { 419 | border-bottom-color: #b34e4d; } 420 | 421 | .hint--error.hint--bottom-right:before { 422 | border-bottom-color: #b34e4d; } 423 | 424 | .hint--error.hint--bottom:before { 425 | border-bottom-color: #b34e4d; } 426 | 427 | .hint--error.hint--left:before { 428 | border-left-color: #b34e4d; } 429 | 430 | .hint--error.hint--right:before { 431 | border-right-color: #b34e4d; } 432 | 433 | /** 434 | * Warning 435 | */ 436 | .hint--warning:after { 437 | background-color: #c09854; 438 | text-shadow: 0 -1px 0px #6c5328; } 439 | 440 | .hint--warning.hint--top-left:before { 441 | border-top-color: #c09854; } 442 | 443 | .hint--warning.hint--top-right:before { 444 | border-top-color: #c09854; } 445 | 446 | .hint--warning.hint--top:before { 447 | border-top-color: #c09854; } 448 | 449 | .hint--warning.hint--bottom-left:before { 450 | border-bottom-color: #c09854; } 451 | 452 | .hint--warning.hint--bottom-right:before { 453 | border-bottom-color: #c09854; } 454 | 455 | .hint--warning.hint--bottom:before { 456 | border-bottom-color: #c09854; } 457 | 458 | .hint--warning.hint--left:before { 459 | border-left-color: #c09854; } 460 | 461 | .hint--warning.hint--right:before { 462 | border-right-color: #c09854; } 463 | 464 | /** 465 | * Info 466 | */ 467 | .hint--info:after { 468 | background-color: #3986ac; 469 | text-shadow: 0 -1px 0px #1a3c4d; } 470 | 471 | .hint--info.hint--top-left:before { 472 | border-top-color: #3986ac; } 473 | 474 | .hint--info.hint--top-right:before { 475 | border-top-color: #3986ac; } 476 | 477 | .hint--info.hint--top:before { 478 | border-top-color: #3986ac; } 479 | 480 | .hint--info.hint--bottom-left:before { 481 | border-bottom-color: #3986ac; } 482 | 483 | .hint--info.hint--bottom-right:before { 484 | border-bottom-color: #3986ac; } 485 | 486 | .hint--info.hint--bottom:before { 487 | border-bottom-color: #3986ac; } 488 | 489 | .hint--info.hint--left:before { 490 | border-left-color: #3986ac; } 491 | 492 | .hint--info.hint--right:before { 493 | border-right-color: #3986ac; } 494 | 495 | /** 496 | * Success 497 | */ 498 | .hint--success:after { 499 | background-color: #458746; 500 | text-shadow: 0 -1px 0px #1a321a; } 501 | 502 | .hint--success.hint--top-left:before { 503 | border-top-color: #458746; } 504 | 505 | .hint--success.hint--top-right:before { 506 | border-top-color: #458746; } 507 | 508 | .hint--success.hint--top:before { 509 | border-top-color: #458746; } 510 | 511 | .hint--success.hint--bottom-left:before { 512 | border-bottom-color: #458746; } 513 | 514 | .hint--success.hint--bottom-right:before { 515 | border-bottom-color: #458746; } 516 | 517 | .hint--success.hint--bottom:before { 518 | border-bottom-color: #458746; } 519 | 520 | .hint--success.hint--left:before { 521 | border-left-color: #458746; } 522 | 523 | .hint--success.hint--right:before { 524 | border-right-color: #458746; } 525 | 526 | /** 527 | * source: hint-always.scss 528 | * 529 | * Defines a persisted tooltip which shows always. 530 | * 531 | * Classes added: 532 | * 1) hint--always 533 | * 534 | */ 535 | .hint--always:after, .hint--always:before { 536 | opacity: 1; 537 | visibility: visible; } 538 | 539 | .hint--always.hint--top:before { 540 | -webkit-transform: translateY(-8px); 541 | -moz-transform: translateY(-8px); 542 | transform: translateY(-8px); } 543 | 544 | .hint--always.hint--top:after { 545 | -webkit-transform: translateX(-50%) translateY(-8px); 546 | -moz-transform: translateX(-50%) translateY(-8px); 547 | transform: translateX(-50%) translateY(-8px); } 548 | 549 | .hint--always.hint--top-left:before { 550 | -webkit-transform: translateY(-8px); 551 | -moz-transform: translateY(-8px); 552 | transform: translateY(-8px); } 553 | 554 | .hint--always.hint--top-left:after { 555 | -webkit-transform: translateX(-100%) translateY(-8px); 556 | -moz-transform: translateX(-100%) translateY(-8px); 557 | transform: translateX(-100%) translateY(-8px); } 558 | 559 | .hint--always.hint--top-right:before { 560 | -webkit-transform: translateY(-8px); 561 | -moz-transform: translateY(-8px); 562 | transform: translateY(-8px); } 563 | 564 | .hint--always.hint--top-right:after { 565 | -webkit-transform: translateY(-8px); 566 | -moz-transform: translateY(-8px); 567 | transform: translateY(-8px); } 568 | 569 | .hint--always.hint--bottom:before { 570 | -webkit-transform: translateY(8px); 571 | -moz-transform: translateY(8px); 572 | transform: translateY(8px); } 573 | 574 | .hint--always.hint--bottom:after { 575 | -webkit-transform: translateX(-50%) translateY(8px); 576 | -moz-transform: translateX(-50%) translateY(8px); 577 | transform: translateX(-50%) translateY(8px); } 578 | 579 | .hint--always.hint--bottom-left:before { 580 | -webkit-transform: translateY(8px); 581 | -moz-transform: translateY(8px); 582 | transform: translateY(8px); } 583 | 584 | .hint--always.hint--bottom-left:after { 585 | -webkit-transform: translateX(-100%) translateY(8px); 586 | -moz-transform: translateX(-100%) translateY(8px); 587 | transform: translateX(-100%) translateY(8px); } 588 | 589 | .hint--always.hint--bottom-right:before { 590 | -webkit-transform: translateY(8px); 591 | -moz-transform: translateY(8px); 592 | transform: translateY(8px); } 593 | 594 | .hint--always.hint--bottom-right:after { 595 | -webkit-transform: translateY(8px); 596 | -moz-transform: translateY(8px); 597 | transform: translateY(8px); } 598 | 599 | .hint--always.hint--left:before { 600 | -webkit-transform: translateX(-8px); 601 | -moz-transform: translateX(-8px); 602 | transform: translateX(-8px); } 603 | 604 | .hint--always.hint--left:after { 605 | -webkit-transform: translateX(-8px); 606 | -moz-transform: translateX(-8px); 607 | transform: translateX(-8px); } 608 | 609 | .hint--always.hint--right:before { 610 | -webkit-transform: translateX(8px); 611 | -moz-transform: translateX(8px); 612 | transform: translateX(8px); } 613 | 614 | .hint--always.hint--right:after { 615 | -webkit-transform: translateX(8px); 616 | -moz-transform: translateX(8px); 617 | transform: translateX(8px); } 618 | 619 | /** 620 | * source: hint-rounded.scss 621 | * 622 | * Defines rounded corner tooltips. 623 | * 624 | * Classes added: 625 | * 1) hint--rounded 626 | * 627 | */ 628 | .hint--rounded:after { 629 | border-radius: 4px; } 630 | 631 | /** 632 | * source: hint-effects.scss 633 | * 634 | * Defines various transition effects for the tooltips. 635 | * 636 | * Classes added: 637 | * 1) hint--no-animate 638 | * 2) hint--bounce 639 | * 640 | */ 641 | .hint--no-animate:before, .hint--no-animate:after { 642 | -webkit-transition-duration: 0ms; 643 | -moz-transition-duration: 0ms; 644 | transition-duration: 0ms; } 645 | 646 | .hint--bounce:before, .hint--bounce:after { 647 | -webkit-transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); 648 | -moz-transition: opacity 0.3s ease, visibility 0.3s ease, -moz-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); 649 | transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); } 650 | --------------------------------------------------------------------------------