GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → ytiurin → Html5tooltipsjs

ytiurin / Html5tooltipsjs

Licence: mit
Tooltips with smooth 3D animation

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

csstooltiptooltips

Projects that are alternatives of or similar to Html5tooltipsjs

Easy Toggle State
A tiny JavaScript library to easily toggle the state of any HTML element in any contexts, and create UI components in no time.
Stars: ✭ 261 (-70.74%)
Mutual labels:  tooltip, tooltips
Balloon
🎈 Modernized and sophisticated tooltips, fully customizable with an arrow and animations on Android.
Stars: ✭ 2,242 (+151.35%)
Mutual labels:  tooltip, tooltips
Cooltipz.css
A modern, highly customisable, minimal, pure CSS tooltip library
Stars: ✭ 81 (-90.92%)
Mutual labels:  tooltip, tooltips
Ngx Popper
An angular wrapper for popper.js, great for tooltips and positioning popping elements
Stars: ✭ 183 (-79.48%)
Mutual labels:  tooltip, tooltips
Zebra Tooltips
A lightweight, accessible, and highly configurable jQuery plugin for creating beautiful tooltips
Stars: ✭ 52 (-94.17%)
Mutual labels:  tooltips, tooltip
react-popper
🍿⚛Official React library to use Popper, the positioning library
Stars: ✭ 2,415 (+170.74%)
Mutual labels:  tooltips, tooltip
React Popper
🍿⚛Official React library to use Popper, the positioning library
Stars: ✭ 2,173 (+143.61%)
Mutual labels:  tooltip, tooltips
SpikeTip
Create effortless tooltips that breathe CSS! No Javascript. Just the good old CSS.
Stars: ✭ 26 (-97.09%)
Mutual labels:  tooltips, tooltip
Tooltips
Simple to use library for android, enabling to add a tooltip near any view with ease
Stars: ✭ 723 (-18.95%)
Mutual labels:  tooltip, tooltips
Bgatransformerstip Android
Android 通用 PopupWindow，再也不用找 UI 小姐姐切 .9 图片了，大致能为你节省 30 分钟的开发时间
Stars: ✭ 372 (-58.3%)
Mutual labels:  tooltip
React Laag
Hooks to build things like tooltips, dropdown menu's and popovers in React
Stars: ✭ 568 (-36.32%)
Mutual labels:  tooltip
Angular Tooltips
Angularjs tooltips module, add tooltips to your elements - https://720kb.github.io/angular-tooltips
Stars: ✭ 357 (-59.98%)
Mutual labels:  tooltips
React Portal Tooltip
Awesome React tooltip
Stars: ✭ 394 (-55.83%)
Mutual labels:  tooltip
Css Components
☕️ A set of common UI Components using the power of CSS and without Javascript.
Stars: ✭ 592 (-33.63%)
Mutual labels:  tooltip
React Joyride
Create guided tours in your apps
Stars: ✭ 4,215 (+372.53%)
Mutual labels:  tooltip
React Useportal
🌀 React hook for Portals
Stars: ✭ 698 (-21.75%)
Mutual labels:  tooltip
Protip
A new generation jQuery Tooltip plugin
Stars: ✭ 357 (-59.98%)
Mutual labels:  tooltip
Mahou
Mahou(魔法) - The magic layout switcher.
Stars: ✭ 335 (-62.44%)
Mutual labels:  tooltip
Tip
Programmable tooltip that can be used with any Mac OS app
Stars: ✭ 798 (-10.54%)
Mutual labels:  tooltip
Wenk
😉 Lightweight pure CSS tooltip for the greater good
Stars: ✭ 694 (-22.2%)
Mutual labels:  tooltip
View All Similar Projects ➔

npm npm

html5tooltips.js

Tooltips, written in pure JavaScript, with smooth 3D animation implemented in CSS. No framework required. http://ytiurin.github.io/html5tooltipsjs

Install

npm install html5tooltipsjs

or

bower install html5tooltipsjs

Simple usage

The simplest way to tie a tooltip to a specific UI element is to add a data-* attribute to an element's HTML code.

<span data-tooltip="Refresh"></span>

Add extra attributes to customize a tooltip.

<span data-tooltip="Refresh" data-tooltip-stickto="right" data-tooltip-color="bamboo"
  data-tooltip-animate-function="foldin"></span>

Customization inheritance

To customize multiple tooltips with less of code, add a data-* attribute to their shared parent element (or document body).

<body data-tooltip-animate-function="foldin">
  <div data-tooltip-color="bamboo">
    <span data-tooltip="Build"></span>
    <span data-tooltip="Refresh"></span>
    <span data-tooltip="Delete"></span>
  </div>
</body>

Advanced usage

You may use a JavaScript constructor to abstract from your view layer.

html5tooltips({
  animateFunction: "spin",
  color: "bamboo",
  contentText: "Refresh",
  stickTo: "right",
  targetSelector: "#refresh"
});

There is an extra feature in html5tooltips.js that allows to show extended text in the tooltip, when user focuses on input field and editable element. You can use plain text or HTML formatting.

html5tooltips({
  contentText: "Not less then 8 symbols",
  contentMore: "Use lower and UPPER case letters, num<span style='color:red'>6</span>ers and spec<span style='color:red'>!</span>al symbols to make password safe and secure.",
  maxWidth: "180px",
  targetSelector: "#password"
});

Define multiple tooltips by passing an array of tooltip objects to the Javascript constructor.

html5tooltips([
  {
    animateFunction: "spin",
    color: "#FF0000",
    contentText: "Refresh",
    stickTo: "right",
    targetSelector: "#refresh"
  },
  {
    contentText: "Simple to remember",
    contentMore: "Check that your login name is not used by anyone else.",
    stickTo: "left",
    maxWidth: "180px",
    targetSelector: "#username"
  }
]);

Styling

To modify tooltip presentation, simply apply styling to it's root element .html5tooltip-box. Properties background-color, color, border-radius, box-shadow, font-family and font-size will propogate to the tooltip text container and pointer.

.html5tooltip-box
{
  background-color: #2A2A2A;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.15), 0 0 10px rgba(255,255,255,.15);
  color: #F7F7F7;
  font-family: arial,sans-serif;
  font-size: 11px;
  font-weight: bold;
}

For Single Page Applications

Refresh tooltips when you update declarative announcement of tooltips or when DOM change, affecting tooltips target elements.

html5tooltips.refresh();

HTML5Tooltip UI Component

var tooltip = new HTML5TooltipUIComponent;
var target = document.getElementById("refresh");

tooltip.set({
  animateFunction: "spin",
  color: "bamboo",
  contentText: "Refresh",
  stickTo: "right",
  target: target
});

target.addEventListener('mouseenter',function(){
  tooltip.show();
});

target.addEventListener('mouseleave',function(){
  tooltip.hide();
});

tooltip.mount();

Get a tooltip by the target element

var tooltip = html5tooltips.getTooltipByTarget(document.getElementById('myElement'));

tooltip.destroy();

List of possible parameters

  • animateFunction - Choose one of the available animate functions: fadein, foldin, foldout, roll, scalein, slidein, spin. Default value fadein.
  • color - Any CSS color or one of the predefined colors: daffodil, daisy, mustard, citrus-zest, pumpkin, tangerine, salmon, persimmon, rouge, scarlet, hot-pink, princess, petal, lilac, lavender, violet, cloud, dream, gulf, turquoise, indigo, navy, sea-foam, teal, peacock, ceadon, olive, bamboo, grass, kelly, forrest, chocolate, terra-cotta, camel, linen, stone, smoke, steel, slate, charcoal, black, white, metalic-silver, metalic-gold, metalic-copper.
  • contentText - Text for a tooltip; HTML may be applied.
  • contentMore - Text for the expanded version of a tooltip which shows up when focused on a target element; HTML may be applied.
  • delay - Delay the tooltip show up in milliseconds. Default value is 500.
  • hideDelay - Delay the tooltip hide in milliseconds, if the tooltip is persistent. Default value is 300.
  • disableAnimation - Disable the animation: true or false. Default value is false.
  • maxWidth - The maximum width of the expanded version of the tooltip.
  • persistent - If set to true, the tooltip will wait for hideDelay number of milliseconds before hide. Default value is false.
  • stickTo - Choose one of the available stick values: bottom, left, right, top. Default value is bottom.
  • stickDistance - The number of pixels that represent the distance between the tooltip and a target element.
  • targetSelector - A CSS selector which is used to catch a target element in the document.

List of possible data-* attributes

  • data-tooltip - Value for the contentText parameter.
  • data-tooltip-animate-function - Value for the animateFunction parameter.
  • data-tooltip-disable-animation - Value for the disableAnimation parameter.
  • data-tooltip-color - Value for the color parameter.
  • data-tooltip-delay - Value for the delay parameter.
  • data-tooltip-hide-delay - Value for the hideDelay parameter.
  • data-tooltip-maxwidth - Value for the maxWidth parameter.
  • data-tooltip-more - Value for the contentMore parameter.
  • data-tooltip-persistent - Value for the persistent parameter.
  • data-tooltip-stickto - Value for the stickTo parameter.

Browser compatibility

Tooltips are compatible with old browsers including IE7. Animation works in Chrome 1.0, Firefox 2.0, Internet Explorer 10, Opera 10.5, Safari 3.2.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].