ytiurin / html5tooltipsjs Goto Github PK

View Code? Open in Web Editor NEW

890.0 890.0 83.0 8.86 MB

Tooltips with smooth 3D animation

Home Page: http://ytiurin.github.io/html5tooltipsjs

License: MIT License

HTML 12.68% CSS 15.06% JavaScript 72.26%

css javascript tooltip tooltips

html5tooltipsjs's Introduction

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

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.

html5tooltipsjs's People

Contributors

Stargazers

Watchers

Forkers

arianra nomiad harryrettir codio uruana ahzf arendjr esjsmith peripheral1994 carabina cybernetics jmcduffie32 acroyear gdseller marufsiddiqui suiramus fapapboy daviferreira kublaj jaggedsoft wir beingmeta unicornprem alexeiikozachuk peiche hpitas nimblenotes fsanchezro allensh929 yuanlin albertolarah artosyadl superyarik sssensi gitye andy737 luxifertran berkeleycole ipaulito arekto adamiko xiwc fun-alex-alex2006hw jordanjs babarayub ncou git-demyan kvismensters denistkachuk mikhus hisaveliy jaycat webag mc4rol9 zonderweb enterstudio superelement davenallen jellyer axosoft-ashley tumulalmamun dehenne bianhuikang aadzl tamriko127 fahad-israr panghaojie acdsxb liu-huitao thecoderlady lee66 arturorojasenei tonyrandriamanantsoa filippoquaranta prateek32177 sanyuesiyuewuyue gygczxq zhibin2015 digdug101 ola-akinlaja m4madd panboren

html5tooltipsjs's Issues

More placement options

Hi,

Great plugin! Is it possible to add more positioning options for the tooltip?

Currently we have top, bottom, left and right. I would like to be able to combine them. For example bottom-left.

Perhaps this could be easily fixed with overwriting some CSS?

I would be happy to help, however, I am not able to keep the tooltip longer in my DOM to be able to play around with css...

tModel grows exponentially

In this function:

var html5tooltipsGlobal=function(userTModels, userOptions)
{
  if (userTModels.length)
    // merge arrays
    Array.prototype.push.apply(safeTModels, userTModels);

  else if (typeof userTModels === "object")
    safeTModels.push(userTModels);

  options = userOptions ? extend({}, userOptions) : options;

  Array.prototype.push.apply(tModels,safeTModels);
  untieTooltips&&untieTooltips();
  untieTooltips=tieTooltips();
};

The variable tModels grows exponentially every time you call html5tooltips({...});. Because safeTModels contains all your toolTips (+1 every call) and you add it every time to tModels. I create round about 20 tooltips but tModel contains over 400 entries. If I found a solution I post it later hier.

Have a nice day :)

Allow programmatic access to tooltips

Currently, there is no way to:

programmatically make a tooltip appear (except by hacking: html5tooltips({...}); $input.blur(); $input.focus();)
programmatically remove a tooltip (e.g. var tt = html5tooltips({...}); tt.destroy();)

Manual maxWidth

maxWidth needs a number like 180 not a String ("180px"), can u update your manual?

Changing tooltips stem position

Just wondering if it is possible to change the stem of tooltips to arbitrary length and/or position?

html5tooltips.refresh() is not a function

Get this error when trying to invoke refresh()

tooltip unresponsive to screen size

Hi,

When I tried to change the width of the web page, tooltips did not move over unlike everything else that did. Is there a way that you can make tooltips responsive to the change of the screen size? My suggestion would be to just turn off the tooltip whenever the mouse is not hovering on one of the sections.

Before any change:

After making the window width smaller:

Otherwise, tooltips is really nice! Keep up the good work!

z-index not defined

Hi,

Very nice lib.
There is a problem when you add a tooltip near another div with a big z-index, my tooltip text is partialy hidden :(

In your library .js file, when you create the div used for the tooltip, you should add a z-index value else the tooltip could be hidden :

tooltipHTML='\
<div class="html5tooltip" style="box-sizing:border-box;position:fixed;z-index: 1000001;">\.....

I have add the z-index: 1000001 value and now the tooltip is always on top.

You should add this in your lib.

Should i pull a request ?

Global config

First of all, great lib!

Would be really nice to be able to set global settings for the available attributes so that you dont have to set e.g. ´data-tooltip-setto="right"` on all individual elements.

Slidein + fade => is that possible ?

Hi,

Is there a way to add a fade in/ou when the effect is set to "SLIDEIN" ?
Thank you for your help.

UPDATE : in fact i think the javascript destroy the tooltips once the mouse is leaving, so the tooltips is hidden without a fade effect. Is there a way to change this ? Thank you.

Keep up the good work.

Tooltips do not work on iOS 9

Tooltips are not displayed when tapping on the trigger. Tested on:

iPhone 6s, iOS 9.3.4, Safari
iPhone 6, iOS 9.3.2, Safari

Unfortunately I am unable to debug the issue because I don't have a device with OSX. Could you please investigate this issue?

Thanks!

apply to cached Dom object instead of selector

I generate the stuff in a template. It looks like:

I want to be able to pass html5tooltip() a dom object instead of a selector.

i.e.,

const selectedDomObject a=$('#something');

//do some stuff to generate content text from the tooltip string

html5tooltip(
targetSelector:selectedDomObject,
//etc
);

I was really surprised that this doesn't already work. Any advice?

Make tooltip remain when hovered over

Is it possible to have tooltip remain active if you hover over the tooltip itself? It appears the default setup is to have it disappear when you are not hovering over the target element, but there are a number of use cases for making the tooltip persist if you hover over it (an HTML button with a click action as contents, for example).

Input with focus disable tooltip in other elements

In http://ytiurin.github.io/html5tooltipsjs/ page, when input have focus, left buttons don't trigger the tooltip on hover.

HTML5TooltipUIComponent.show() Not Working

So, this works:

html5tooltips({
	animateFunction: "scale",
	color: "navy",
	contentText: "Select Credit or Debit",
	stickTo: "top",
	targetSelector: "#balance",
	persistent: true,
	hideDelay: 15000
});

But my goal is to display the tooltip when a user submits a form, so I followed your doc:

var tooltip = new HTML5TooltipUIComponent;
var target = document.getElementById( 'balance' );
console.log( target );

tooltip.set({
	animateFunction: "scale",
	color: "navy",
	contentText: "Select Credit or Debit",
	stickTo: "top"
});
target.addEventListener('mouseenter',function(){
	console.log( 'mouseenter' );
	console.log( tooltip );
	tooltip.show();
});
target.addEventListener('mouseleave',function(){
	console.log( 'mouseleave' );
	tooltip.hide();
});
tooltip.mount();

Consoling target shows the element I want, and consoling tooltip shows the tooltip object with all of the methods I'd expect to see. No console errors, just doesn't show.

Implement rgba values for color attr

It would be really nice if you can implement rgba values for the color attr. Transparent background locks really fancy

Extract contentText from an attribute of the target

I construct the stuff in a template. I stash the tools tips like this:

When I found that html5tooltip() doesn't allow you to simple specify an attribute for the content, I assumed I would have to iterate over the list of elements, extract the text and make the call.

The function is so nice that I actually can't believe that this is the case. Any advice?

ReferenceError: moveTooltip is not defined

How to repeat:

const tooltip = new HTML5TooltipUIComponent();
tooltip.set({ 'target': $0 });
tooltip.mount();
tooltip.destroy();

problem in:

  // UI COMPONENT CONSTRUCTOR
  function Component(publicInterface,HTML)
  {

   // ...

    // COMPONENT INTERFACE
    component.destroy=function()
    {
      if(typeof window!=='undefined'){
        window.removeEventListener("resize", moveTooltip);
        window.removeEventListener("scroll", moveTooltip);
      }

      component.unmount();
    };

   // ...

  }

function moveTooltip declared in internal scope of

  // TOOLTIP UI COMPONENT
  function HTML5TooltipUIComponent()

Release of version 1.7.3?

After merging @dehenne pull request (d13aca0), is it possible to create/release a version 1.7.3?
We need that fix in our project and would like to prevent the hassle of creating our own fork.

Thanks in advance :)

Expose "moveTooltip" to public API

Looks like the only way to trigger "moveTooltip" currently is to fake the "scroll" event, but that's hacky. It would be useful in the public API for cases like mine, where numerous factors can change the DOM layout.