lorenzos / floatingtips Goto Github PK

Lorenzos, thanks for your work, it is really usefull

I notice an issue when the tooltip is used with a container.
For example the following code:

<div id='A'>
  <p id='B'>text B</p>
  <p id='C'>text C</p>
</div>

<script>
new FloatingTips('#A', {
  content: function() { return 'This is a test'; },
  position: 'bottom'
});
</script>

When the mouse goes on A over B, the tooltip appears correctly, then if you move the mouse down over C, then goes out from A, the tooltip is still shown.
Then, if you go on A over C, you will have 2 tooltips.
(I tried this on IE, Firefox and Chrome)

I don't know how to correct this, any idea?

Thanks for your help

PS: I needed a new position type, 'toporbottom' to display the tooltip on top if it can be seen, if not, it is display on bottom of the element.
I modified the code, a little bit for that, can I send it to you for other users if needed?

In my case, I have elements associated with FloatingTips - classic
The FloatingTips is shown when the mouse rollover the element - classic

Now, I need to dispose elements to replace them by others, but if a FloatingTip is shown, it is not hidden, and it stays shown

Any idea to correct that?

Thanks

I was just testing this, specifically the possibility to pass an array of objects to become floating tips. It seems to fail when passing an array to the script as seen here: http://jsfiddle.net/daiv/FYeq3/

ie: new FloatingTips(['#simple a', 'a.qwe']);

Element members of the same FloatingTips instance should be known to FloatingTips in order to be able to close them (i.e. showing only one Tip at once).
As a side-feature, a hideOn: 'memberPopup' functionality could be introduced which will concern with that.
Will provide a PR.

Hello lorenzo,

I have a question again. Is there a possibility to use the floating tips on an imagemap? I mean, it works, that the tooltip shows, but not on the expected position but on the top left corner of the page.
Is there a way to move it to the right position?

Thanx again,

Felix

Hi,
When i use class for multiple elements, tooltip for first matched element works well but for other there is no content in tooltips!
I used new FloatingTips('a'); as Javascript of jsFiddle demo sample and saw effect.

Thanks for handy plugin.

Hi Lorenzo,

just stumbled upon the following lines (currently https://github.com/lorenzos/FloatingTips/blob/master/Source/FloatingTips.js#L139 ):

var cwr = new Element('div').addClass(o.className).setStyle('margin', 0);
var tip = new Element('div')
    .addClass(o.className + '-wrapper')
    .addClass('position-' + this.options.position)
    .setStyles({ 'margin': 0, 'padding': 0, 'z-index': cwr.getStyle('z-index') })
    .adopt(cwr);

I'm talking about the setStyles(...z-index:...) setting; how is this supposed to work when its fetched from cwr which is just created one line above?
In my case, this evals to 'auto' which is the worst of all, because no CSS rules apply anymore then (the auto has precedence).

Do you see a reason for this, or would you see a configuration workaround?

Add the alternative initialization syntax in HowTo (both README.me and jsFiddle Demo, as comment?) and in README.md Docs (initilization):

$$('a').floatingTips(options);

If you call show on some element that has tip several times before the fx opacity effect is over, then the object create more and more tips cause it doesn't recognize that the tip is in the middle of the animation:
line 84:

if (old) if (old.getStyle('opacity') == 1) { clearTimeout(old.retrieve('timeout')); return this; }

The fix is to set the compare to != 0

if (old) if (old.getStyle('opacity') != 0) { clearTimeout(old.retrieve('timeout')); return this; }

Hi Lorenzo,

In my case it was useful to have the offset-option a callback because I wanted to float-tip a progress-bar-percentage; so I had to calculate the offset dependent of the progress.

So right after the line:

var tipSz = tip.getSize(), trgC = elem.getCoordinates(body);

I added:

var offsetOption = ( 'function' === typeOf(o.offset) ? Object.merge({x:0, y:0}, o.offset(elem)) : o.offset );

And replaced the following line with:

var pos = { x: trgC.left + offsetOption.x, y: trgC.top + offsetOption.y };

(sorry I'm too lazy to build a pull request)

This checks of the given offset option is a function; if so, it invokes it and merges the result with x:0 and y:0 (the callback function has to return an object with x and/or y).
So basically the functionality keeps the same with the exception that, in case of a function is given, it is invoked.

Thanks and best!
-adrian

Hi Lorenzo,

I have a top menu which is position:fixed, and as soon as the page body is scrolled, the floating tips are displayed incorrectly.
This boils down to MooTool's .getCoordinates() method, see this example: http://jsfiddle.net/afoeder/gnpY2/

Do you have an idea how to circumvent this, especially from my user side? I think I could even substract the current scroll pos, but then the offset calculation must be a callback.
At the last resort, do you think this would be a good idea? something like a "positionCalculationCallback" or so...

You might want to consider adding a z-index as option zIndex or something.
I was playing with some layered designs and it didn't work in webkit. If you add a z-index to the .floating-tip class in css it doesn't matter, because it will be seen as 'auto' in webkit (safari + chrome). Firefox works OK, but that might be a 'bug' really in Firefox.

You need to set a 'position' value for the z-index to work, but adding a position breaks the final layout (since the tip is created inside the class).
So I guess either work with a (required) position: relative with z-index value in the user's css and reset/fix all positioning in the _create method, or add a zIndex as option and apply it to the created tip.

I'm a bit tired atm, so didn't create a demo fiddle, can do that tomorrow.

Hello,

it's not an issue as such, more a question of how to.

Your class is really cool and I would like to use it with my form that uses ajax for validation. On the error response, I would like to trigger a tip for a particular input with an error message.

Could I do something like

if(response == 1){

new FloatingTips('myinput' , { position: 'right', showOn:'load', 'content':'error, incorrect value' });
}

Any help would be great.

Thanks!

I don't know if this is intended, the code doesn't tell that very well.
There is

    show: function(element) {
        var old = element.retrieve('floatingtip');
        if (old) if (old.getStyle('opacity') != 0) { clearTimeout(old.retrieve('timeout')); return this; }
        var tip = this._create(element);
        if (tip == null) return this;
        element.store('floatingtip', tip);
        this._animate(tip, 'in');
        element.store('floatingtip_visible', true);
        this.fireEvent('show', [tip, element]);
        return this;
    },

I can't see the intention of the second line if(old) if (old.getStyle.... because if the opacity is 0, the condition would not match and the tip is created in any case.
As far as I can see it, the following block would make more sense (caution: does not work, should only show the idea):

    show: function(element) {
        var tip = element.retrieve('floatingtip');
        if (tip) {
            if (tip.getStyle('opacity') != 0) {
                clearTimeout(tip.retrieve('timeout'));
                return this;
            }
        } else {
            tip = this._create(element);
            if (tip == null) return this;
            element.store('floatingtip', tip);
        }
        this._animate(tip, 'in');
        element.store('floatingtip_visible', true);
        this.fireEvent('show', [tip, element]);
        return this;
    },

This will reuse the same tip every time. What do you think @lorenzos ?

Hi, class looks nice.. using it left some stuff to desire, eg. why don't you allow an Elements instance as the input?
It's more common to feed a class either 1 element, a collection of elements as an Elements instance or just a string (and the class will try and document.id it or something).
With your setup I have to input a string selector or an "element collection" but I don't know what kind of collection.
I can't even feed it document.id('myLink') or 'myLink', no.. it has to be '#myLink' ... grmbl! very annoying.

Apart from that, nice ;)

In FloatingTips.js, More/Element.Measure must be added as requirement.
Will provide a PR.

Hi Lorenzo,
could you please be so kind and add the 'sources' directive in your package.yml so that the packager works fine?

sources:
  - "Source/floatingtips.js"

That'd be fine, thanks and happy-new-year in advance :)

Provide an "outsideclick" (pseudo-) event as possible value for the hideOn option, which will hide the tooltip when clicking outside the tooltip (especially interesting for FloatingTips.Dialog).

In FloatingTips.Dialog this would be a reasonable default option rather than the 'never', but this will mean a breaking change.

@lorenzos what do you think about the idea at all and the FloatingTips.Dialog default thing?

Will create a PR.

Have you ever considered this feature?