ytiurin / html5tooltipsjs Goto Github PK

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

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.

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 ?

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

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 :)

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();)

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?

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...

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!

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 :)

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.

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).

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.

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?

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.

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

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!

Get this error when trying to invoke refresh()

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()

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