hint.css - A CSS only tooltip library for your lovely websites.

  •        14

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.

http://kushagragour.in/lab/hint/
https://github.com/chinchang/hint.css

Tags
Implementation
License
Platform

   




Related Projects

wenk - :wink: Lightweight pure CSS tooltip for the greater good

  •    CSS

Wenk is a Lightweight tooltip available in pure CSS, cssnext using PostCSS, Less or SCSS. Simply add the data-wenk attribute to your HTML with the text you want to display.

react-hint - Tooltip component for React, Preact, Inferno

  •    Javascript

React-hint is a small tooltip component for React which is developed with simplicity and performance in mind. It also plays nicely with Preact and Inferno. You don't need to include ReactHint in every component which uses tooltips, just include it once in the topmost container component. In case you need to define multiple instances of ReactHint, you can customise the attribute name per instance. ReactHint also supports custom tooltip content with attached event handlers by overriding the content renderer and returning a react node.

css-components - :coffee: A set of common UI Components using the power of CSS and without Javascript

  •    HTML

A set of common UI Components using the power of CSS and without Javascript. * CSS3 transitions are not supported in IE8 and below. ** Janky z-index. See tooltip on right example.

simptip - A simple CSS tooltip made with Sass

  •    CSS

What you see in the data-tooltip attribute is the text content of the tooltips, and the value of class attribute is tooltop's position. You can use .simptip-position-right , .simptip-position-bottom and .simptip-position-left class for other positions that you would like.

microtip - 💬 Minimal, accessible, ultra lightweight css tooltip library. Just 1kb.

  •    CSS

Modern, minimal css tooptip library with accessibility baked in. Just `1kb` minified and gzipped.


bem-constructor - A Sass library for building immutable and namespaced BEM-style CSS objects

  •    CSS

BEM Constructor is a Sass library for building immutable and namespaced BEM-style CSS objects. By enforcing a consistent and programatic way of defining objects (blocks, elements and modifiers) it ensures a more structured, robust and secure object codebase that is easy to understand and maintain. Objects defined using the constructor are impossible to modify and reassign by mistake or omission.

balloon.css - Simple tooltips made of pure CSS

  •    CSS

Balloon.css lets you add tooltips to elements without JavaScript and in just a few lines of CSS. Manually: Simply download balloon.min.css from this repo and add it to your HTML. e.g.

hint.css - A tooltip library in CSS for your lovely websites.

  •    Javascript

A tooltip library in CSS for your lovely websites.

inuitcss - Extensible, scalable, Sass-based, OOCSS framework for large and long-lasting UI projects.

  •    CSS

Extensible, scalable, Sass-based, OOCSS framework for large and long-lasting UI projects. inuitcss is a framework in its truest sense: it does not provide you with UI and design out of the box, instead, it provides you with a solid architectural baseline upon which to complete your own work.

ng-bootstrap - Angular powered Bootstrap

  •    TypeScript

Welcome to the Angular version of the Angular UI Bootstrap library. This library is being built from scratch by the ui-bootstrap team. We are using TypeScript and targeting the Bootstrap 4 CSS framework. As with Bootstrap 4, this library is a work in progress. Please check out our list of issues to see all the things we are implementing. Feel free to make comments there.

android-simple-tooltip - A simple library based on PopupWindow to create Tooltips on Android. 💚

  •    Java

A simple library based on PopupWindow to create Tooltips on Android. More info on the sample project and javadoc.

Fomantic-UI - Fomantic-UI is a community fork of Semantic-UI

  •    Javascript

A community fork of the popular Semantic-UI framework. EDIT: Lots has changed since we started this project and we are now starting the development of FUI v3. You can read more about the > v3 proposals here.

cssarrowplease - Generate CSS tooltip arrows

  •    Javascript

Generate CSS tooltip arrows

avalanche - Superclean, powerful, responsive, Sass-based, BEM-syntax CSS grid system

  •    CSS

Example of a two column, responsive, centered grid. All grid layout classes and responsive width classes are modifiers. $av-namespace Global prefix for layout and cell class names. Default: grid.

Semantic-UI - Semantic is a UI component framework based around useful principles from natural language

  •    Javascript

Semantic is a UI framework designed for theming.Semantic allows developers to build beautiful websites fast, with concise HTML, intuitive javascript, and simplified debugging, helping make front-end development a delightful experience. Semantic is responsively designed allowing your website to scale on multiple devices. Semantic is production ready and partnered with frameworks such as React, Angular, Meteor, and Ember, which means you can integrate it with any of these frameworks to organize your UI layer alongside your application logic.

TBHintView

  •    Objective-C

TBHintView is a simple, highly customizable hint library for iOS. It enables you to add simple hints to any UIView. It features multiple page support and various show and hide animation types. The dismiss and title icon are for demo purposes only and are available from Glyphish. Includes a demo ready-to-use demo implementation that manages the 'has seen' status of a hint and also allows to globally turn on/off hint display.

mini.css - A minimal, responsive, style-agnostic CSS framework!

  •    CSS

mini.css is a lightweight CSS framework (under 7KB gzipped) designed with mobile devices and modern browsers in mind. Responsiveness, ease of use and customization are some of the main features of the framework, while accessibility and extensive documentation are some of the secondary focuses of the project. The framework is written using Sass, while most of its components are based on Flexbox. For instructions on how to use, best practices, templates and other usage information, please visit the framework's documentation.

a11y

  •    CSS

Pronounced Alix. Because it’s simpler. The whole presentation lives in the wiki. Please note that a substantial work has been accomplished to document the whole project, from the Sass layer to each test explanations through CSS selectors and tricks. I suggest you make a tour on a11y.css documentation website.