Data-tip.css - Wow, such tooltip, with pure css!

Related tags

CSS data-tip.css
Overview

Notice: hint.css has been much better since I complained about it months ago, so try out its new features instead of this one!

data-tip.css

Wow, such tooltip, with pure css!

Install

CDN: https://npmcdn.com/data-tip@latest

bower install data-tip
npm install data-tip

# additionally for Stylus lovers
# you can import data-tip.styl directly
@import '/path/to/data-tip'

Usage

Simply write like this in your HTML:

My Custom Button ">
<button class="data-tip-bottom" data-tip="Tips To Show">
  My Custom Button
button>

Position your tip:

data-tip-top
data-tip-bottom
data-tip-left
data-tip-right

Colorful your tip:

data-tip-success
data-tip-warning
data-tip-danger
data-tip-info

Anti-animation:

data-tip-no-animation

Rounded border:

data-tip-rounded

Fast mode:

data-tip-fast

Box with shadow:

data-tip-shadow

Always visible:

data-tip-visible

Development

Update data-tip.styl to change styles

command description
npm install install dependencies for dev
npm run build build html and css files
npm run dev build and watch file changes

Browser Support

Currently it works on IE 8+ and most modern browsers. It uses autoprefixer so just modify gulpfile.babel.js to suit your need.

License

MIT.

You might also like...

CSS Boilerplate / Starter Kit: Collection of best-practice CSS selectors

Natural Selection Natural Selection is a CSS framework without any styling at all. It is just a collection of selectors that can be used to define glo

Dec 8, 2022

Source code for Chrome/Edge/Firefox/Opera extension Magic CSS (Live editor for CSS, Less & Sass)

Live editor for CSS, Less & Sass (Magic CSS) Extension Live editor for CSS, Less & Sass (Magic CSS) for Google Chrome, Microsoft Edge, Mozilla Firefox

Dec 13, 2022

Easily create css variables without the need for a css file!

Tailwind CSS Variables This plugin allows you to configure CSS variables in the tailwind.config.js Similar to the tailwindcss configurations you are u

Dec 22, 2022

micro-library for CSS Flexbox and CSS Grid

SpeedGrid micro-library for CSS Flexbox and CSS Grid Overview SpeedGrid dynamically generates inline CSS by specifying the class name. Easy maintenanc

Mar 26, 2022

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Bootstrap Sleek, intuitive, and powerful front-end framework for faster and easier web development. Explore Bootstrap docs ยป Report bug ยท Request feat

Jan 1, 2023

Modern CSS framework based on Flexbox

Modern CSS framework based on Flexbox

Bulma Bulma is a modern CSS framework based on Flexbox. Quick install Bulma is constantly in development! Try it out now: NPM npm install bulma or Yar

Dec 31, 2022

A utility-first CSS framework for rapid UI development.

A utility-first CSS framework for rapidly building custom user interfaces. Documentation For full documentation, visit tailwindcss.com. Community For

Dec 30, 2022

Materialize, a CSS Framework based on Material Design

MaterializeCSS Materialize, a CSS Framework based on material design. -- Browse the docs -- Table of Contents Quickstart Documentation Supported Brows

Jan 2, 2023

Material Design Components in HTML/CSS/JS

Material Design Lite An implementation of Material Design components in vanilla CSS, JS, and HTML. Material Design Lite (MDL) lets you add a Material

Jan 4, 2023
Comments
  • Button Tooltips won't work in IE9

    Button Tooltips won't work in IE9

    Hi,

    the tooltips which are set on buttons in your example don't work in IE9. Is this wrong in the example page, or just not possible in IE9?

    Example Page: https://egoist.github.io/data-tip.css/

    Regards Bernd

    opened by bernd-s 5
  • Configure Renovate

    Configure Renovate

    Mend Renovate

    Welcome to Renovate! This is an onboarding PR to help you understand and configure settings before regular Pull Requests begin.

    ๐Ÿšฆ To activate Renovate, merge this Pull Request. To disable Renovate, simply close this Pull Request unmerged.


    Detected Package Files

    • package.json (npm)

    Configuration Summary

    Based on the default config's presets, Renovate will:

    • Start dependency updates only once this onboarding PR is merged
    • Enable Renovate Dependency Dashboard creation
    • If semantic commits detected, use semantic commit type fix for dependencies and chore for all others
    • Ignore node_modules, bower_components, vendor and various test/tests directories
    • Autodetect whether to pin dependencies or maintain ranges
    • Rate limit PR creation to a maximum of two per hour
    • Limit to maximum 10 open PRs at any time
    • Group known monorepo packages together
    • Use curated list of recommended non-monorepo package groupings
    • A collection of workarounds for known problems with packages

    ๐Ÿ”ก Would you like to change the way Renovate is upgrading your dependencies? Simply edit the renovate.json in this branch with your custom config and the list of Pull Requests in the "What to Expect" section below will be updated the next time Renovate runs.


    What to Expect

    With your current configuration, Renovate will create 9 Pull Requests:

    Pin dependencies
    Update dependency autoprefixer-stylus to v0.14.0
    • Schedule: ["at any time"]
    • Branch name: renovate/autoprefixer-stylus-0.x
    • Merge into: gh-pages
    • Upgrade autoprefixer-stylus to 0.14.0
    Update dependency autoprefixer-stylus to v1
    • Schedule: ["at any time"]
    • Branch name: renovate/autoprefixer-stylus-1.x
    • Merge into: gh-pages
    • Upgrade autoprefixer-stylus to 1.0.0
    Update dependency babel-core to v6
    • Schedule: ["at any time"]
    • Branch name: renovate/major-babel-monorepo
    • Merge into: gh-pages
    • Upgrade babel-core to 6.26.3
    Update dependency cssgrace to v3
    • Schedule: ["at any time"]
    • Branch name: renovate/cssgrace-3.x
    • Merge into: gh-pages
    • Upgrade cssgrace to 3.0.0
    Update dependency gulp to v4
    • Schedule: ["at any time"]
    • Branch name: renovate/gulp-4.x
    • Merge into: gh-pages
    • Upgrade gulp to 4.0.2
    Update dependency gulp-postcss to v9
    • Schedule: ["at any time"]
    • Branch name: renovate/gulp-postcss-9.x
    • Merge into: gh-pages
    • Upgrade gulp-postcss to 9.0.1
    Update dependency gulp-rename to v2
    • Schedule: ["at any time"]
    • Branch name: renovate/gulp-rename-2.x
    • Merge into: gh-pages
    • Upgrade gulp-rename to 2.0.0
    Update dependency postcss to v8
    • Schedule: ["at any time"]
    • Branch name: renovate/postcss-8.x
    • Merge into: gh-pages
    • Upgrade postcss to 8.4.14

    ๐Ÿšธ Branch creation will be limited to maximum 2 per hour, so it doesn't swamp any CI resources or spam the project. See docs for prhourlylimit for details.


    โ“ Got questions? Check out Renovate's Docs, particularly the Getting Started section. If you need any further assistance then you can also request help here.


    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • Update package.json to include the repository

    Update package.json to include the repository

    Hi there! This change adds the repository property to your package.json file(s). Having this available provides a number of benefits to security tooling. For example, it allows for greater trust by checking for signed commits, contributors to a release and validating history with the project. It also allows for comparison between the source code and the published artifact in order to detect attacks on authors during the publication process. We validate that we're making a PR against the correct repository by comparing the metadata for the published artifact on npmjs.com against the metadata in the package.json file in the repository. This change is provided by a team at Microsoft -- we're happy to answer any questions you may have. (Members of this team include @s-tuli, @iarna, @v-rr, @v-jiepeng, @v-zhzhou and @v-gjy). If you would prefer that we not make these sorts of PRs to projects you maintain, please just say. If you'd like to learn more about what we're doing here, we've prepared a document talking about both this project and some of our other activities around supply chain security here: microsoft/Secure-Supply-Chain This PR provides repository metadata for the following packages:

    • data-tip
    opened by v-gjy 3
Releases(v0.0.51)
  • v0.0.51(Oct 16, 2015)

Owner
EGOIST
Full-Time Open-Sourcerer. Writing TypeScript most of the time.
EGOIST
Tiny CSS framework with almost no classes and some pure CSS effects

no.css INTERACTIVE DEMO I am tired of adding classes to style my HTML. I just want to include a .css file and I expect it to style the HTML for me. no

null 96 Dec 10, 2022
700+ Pure CSS, SVG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API

700+ Pure CSS, SVG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API

Astrit Malsija 8.9k Jan 2, 2023
A pure html and css library for dark mode in your website.

Dark Mode A pure html and css library for dark mode in your website. Features It has a smooth setting and also it changes via system settings aswell.

null 1 Jan 6, 2022
Delightful, performance-focused pure css loading animations.

Loaders.css Delightful and performance-focused pure css loading animations. What is this? See the demo A collection of loading animations written enti

Connor Atherton 10.2k Jan 4, 2023
Pure CSS gauge component

Pure CSS gauge v0.2 Basic gauge component made with only CSS style rules. No SVG or canvas used in this component. This component can be easily themed

Otto Salminen 4 Oct 7, 2021
๐Ÿ–ผ A pure client-side landing page template that you can fork, customize and host freely. Relies on Mailchimp and Google Analytics.

landing-page-boilerplate A pure client-side landing page template that you can freely fork, customize, host and link to your own domain name (e.g. usi

Adrien Joly 129 Dec 24, 2022
Reseter.css - A Futuristic CSS Reset / CSS Normalizer

Reseter.css A CSS Reset/Normalizer Reseter.css is an awesome CSS reset for a website. It is a great tool for any web designer. Reseter.css resets all

Krish Dev DB 1.1k Jan 2, 2023
Spectre.css - A Lightweight, Responsive and Modern CSS Framework

Spectre.css Spectre.css is a lightweight, responsive and modern CSS framework. Lightweight (~10KB gzipped) starting point for your projects Flexbox-ba

Yan Zhu 11.1k Jan 8, 2023
Low-level CSS Toolkit โ€“ the original Functional/Utility/Atomic CSS library

Basscss Low-level CSS toolkit โ€“ the original Functional CSS library https://basscss.com Lightning-Fast Modular CSS with No Side Effects Basscss is a l

Basscss 5.8k Dec 31, 2022
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

Aphrodite Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation. Support for colocating y

Khan Academy 5.3k Jan 1, 2023