doctype html html head title Simple Hint meta(charset="UTF-8") meta(name="viewport" content="width=device-width, initial-scale=1") link(href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css') link(rel='stylesheet', href='stylesheets/style.css') link(rel='stylesheet', href='stylesheets/simple-hint.css') link(rel='stylesheet', href='stylesheets/prism.css') body .intro #container h1 Simple Hint .intro-items p. Simple-hint is a CSS-only tooltip library. It uses pseudolements to provide simple, perfectly positioned tooltips. Simple-hint is packed with a variety of features including fade-in transitions and animations, custom sizing, different colors and more . .intro-box div span(data-hint="This is a basic hint").hint-top Hover over me div span(data-hint="This is an 'info' hint with an animation").hint-left-t-info.hint-anim Hover over me div span(data-hint="This is a 'success' hint that fades in").hint-right-t-success.hint-fade Hover over me div span(data-hint="This is a 'notice' hint contains alot of text. Lorem ipsum Exercitation ut quis Duis ad dolore ad Duis aute aliquip dolore dolor proident anim quis voluptate ut commodo.").hint-bottom-s-small-t-notice Hover over me .downloads a(href="https://github.com/catc/simple-hint/zipball/master") Download .zip a(href="https://github.com/catc/simple-hint") View on Github br .social-media .pointer #container .main //- installation h2 Installation p To install, simply include one of simple-hint stylesheets: pre: code.language-markup. <link href="css/simple-hint.css" rel="stylesheet" /> p or pre: code.language-markup. <link href="css/simple-hint.min.css" rel="stylesheet" /> br p To install via Bower simply run bower install simple-hint. //- basic usage h2 Basic usage p To get started, use the simple-hint attribute for your text, and then specify the tooltip position by the appropriate class. .example pre: code.language-markup. Top hint div: span(data-hint="your message goes here").hint-top Top hint .example pre: code.language-markup. Bottom hint div: span(data-hint="your message goes here").hint-bottom Bottom hint p Available positions are hint-top, hint-bottom, hint-left, hint-right. If there are any issues with tooltip positioning, try adding position: relative; to the element containing the hint. //- advanced usage h2 Additional features p. Most additional features can be appended to the existing hint class. This helps cut down on the number of classes add to the html tag. h3 Sizing p. The sizing feature breaks long text into lines so you don't end up with a long string. To use sizing, append -s-your_size to the hint positioning class. Available options are -s-small, -s-med, -s-big .example pre: code.language-markup. Small sizing div: span.hint-top-s-small(data-hint="Lorem ipsum Velit cillum quis cillum ullamco Duis labore magna quis Excepteur eu eu nulla in qui sint occaecat in.") Small sizing .example pre: code.language-markup. Medium sizing div: span.hint-top-s-med(data-hint="Lorem ipsum Velit cillum quis cillum ullamco Duis labore magna quis Excepteur eu eu nulla in qui sint occaecat in.") Medium sizing .example pre: code.language-markup. Big sizing div: span.hint-bottom-s-big(data-hint="Lorem ipsum Velit cillum quis cillum ullamco Duis labore magna quis Excepteur eu eu nulla in qui sint occaecat in.") Big sizing h3 Color type p. The color type feature allows you to change your tooltip background color. To specify the type, append -t-your_type to the hint positioning class. Available options are -t-info, -t-success, -t-error, -t-notice .example2 pre: code.language-markup. Info Success Error Notice div span(data-hint="This tooltip type is 'info'").hint-left-t-info Info span(data-hint="This tooltip type is 'success'").hint-right-t-success Success br span(data-hint="This tooltip type is 'error'").hint-left-t-error Error span(data-hint="This tooltip type is 'notice'").hint-right-t-notice Notice h3 Mobile disable p. You can disable tooltips on mobile (< 768px) by appending -mobile to the hint position class. This is useful for touch devices to prevented unwanted tootips from popping up. .example pre: code.language-markup. Hidden on mobile div: span(data-hint="This is hidden on mobile.").hint-top-mobile Hidden on mobile p. Resize your window to < 768px and hover over the item above. You can customize the size at which the tooltip is hidden - see the customize section. h3 Tooltip persist p. To persist tooltip visibility, add the .hint-persist class to the tag. NOTE: this feature requires it's own class - it's not appended to another class. .example pre: code.language-markup. Persist div: span(data-hint="Visible without hovering").hint-bottom.hint-persist Persist h3 Fade in p. To apply a fade-in transition, add the hint-fade class to the tag. NOTE: this feature requires it's own class - it's not appended to another class. .example pre: code.language-markup. Fade in div: span(data-hint="The tooltip fades in").hint-right.hint-fade Fade in h3 Animation p. To apply a move-in animation, add the hint-anim class to the tag. NOTE: this feature requires it's own class - it's not appended to another class. .example pre: code.language-markup. Animate div: span(data-hint="The tooltip is animated").hint-bottom.hint-anim Animate h3 Delay p. This feature adds a hover delay before displaying the hint. The available options are -d-short for a 0.4s delay, -d-med for a 1s delay, -d-long for a 1.5s delay. To add a delay, append the option to either the hint-fade or hint-anim class. .example pre: code.language-markup. Hover for 0.4s for hint div: span(data-hint="This has a 0.4s delay").hint-right.hint-fade-d-short Hover for 0.4s for hint pre: code.language-markup. Hover for 1s for hint div: span(data-hint="This has a 1s delay").hint-bottom.hint-anim-d-med Hover for 1s for hint p. To add a delay to a tooltip that doesn't have a transition/animation (no hint-fade or hint-anim), add the hint-d-your_delay class to the tag. .example pre: code.language-markup. Hover for 1.5s for hint div: span(data-hint="This has a 1.5s delay").hint-top.hint-d-long Hover for 1.5s for hint h3#tldr tl;dr table tr th Feature th Options th Usage tr td Position td .hint-top, .hint-bottom, .hint-left, .hint-right td individual class tr td Sizing td -s-small, -s-med, -s-big td append to .hint-position class tr td Color type td -t-info, -t-success, -t-error, -t-notice td append to .hint-position class tr td Mobile disable td -mobile td append to .hint-position class tr td Tooltip persist td .hint-persist td individual class tr td Fade in td .hint-fade td individual class tr td Animation td .hint-anim td individual class tr td Delay td -d-short, -d-med, -d-long //- td append to .hint-fade or .hint-anim class
| if using no transition/animation, add to separate .hint class td | - append to .hint-fade or .hint-anim class br | - if using no transition/animation, add to separate .hint class (eg: span(class="hint-top hint-d-med") ) h2 Examples p You can use multiple features simultaneously, just append the correct options: p Left positioned hint, error type, medium-sized, hidden on mobile, with a 1s delay on fade-in: .example2 pre: code.language-markup. Hover for 1s div span(data-hint="Lorem ipsum Adipisicing pariatur velit Excepteur aliqua ut deserunt dolore tempor eu id reprehenderit.").hint-left-t-error-s-med-mobile.hint-anim-d-med Hover for 1s p Simple hint is easy to incorporate in inline text: .text | Lorem ipsum Cupidatat in elit consectetur span(data-hint="How fascinating!").hint-bottom nisi quis | dolore proident fugiat reprehenderit consectetur ut ullamco aliqua pariatur aute span(data-hint="This is simply extraordinary!").hint-left ullamco | consectetur eu do ea id in magna proident aliqua voluptate reprehenderit mollit. Lorem ipsum Sint Ut span(data-hint="Wow, who knew?").hint-top dolore | enim voluptate velit. Lorem ipsum Irure incididunt dolore eu. p As well as images if you wrap them in an element that allows pseudolements: .example pre: code.language-markup. <div data-hint="Greg Jackson" class="hint-right-t-info hint-anim"> <img src="/imgs/user.jpg"> </div> .user-example span( data-hint="Greg Jackson").hint-right-t-info.hint-anim img(src="./images/user.jpg") br p Lastly, you can use javascript to toggle hint visibility by adding/removing the hint-persist class. .js-example span(data-hint="this is a tooltip").hint-bottom#toggle-hint Toggle me button#toggle Toggle visibility h2 Customizing h3 Custom fonts p. The font used on this page is Montserrat. You can set your own font by: pre: code.language-css. [data-hint]:after { font-family: 'font_name'; } p Depending on the font you use, you may have to experiment with the font-size and line-height to ensure that tooltip text isn't blurry during the fade-in feature. h3#customize-mobile Changing the mobile option pre: code.language-css. /* changed 768 to whatever value */ @media only screen and (max-width: 768px) { [class*="hint-"][class*="-mobile"]:after, [class*="hint-"][class*="-mobile"]:before { display: none; } } h3 Custom color types p To set your own color type: pre: code.language-css. [class*="hint-"][class*="-t-custom_type_name"] { /* set a custom name */ &[class*="hint-bottom"]:before{ border-bottom-color: custom_background_color; } &[class*="hint-top"]:before{ border-top-color: custom_background_color; } &[class*="hint-right"]:before{ border-right-color: custom_background_color; } &[class*="hint-left"]:before{ border-left-color: custom_background_color; } &:after { background: custom_background_color; color: custom_text_color; } } p and use it by: pre: code.language-markup. My own type! h2 Contributing p If you find any bugs, have feature requests, or would like to contribute - either send me a pull request or open a ticket and I'll do my best to follow up on it. p Developed and maintained by Catalin Covic under the MIT license. script(src="javascripts/prism.js" type="text/javascript") script. function tog(){ document.querySelector('#toggle-hint').classList.toggle('hint-persist') } document.querySelector('#toggle').addEventListener('click', tog);