calebjacob / tooltipster Goto Github PK

Changing title attribute of anchor tag on the fly with javascript doesn't update tooltip title!

I use tooltipster to generate tooltips which works great. Sometimes I get a vertical scrollbar on the right side of my browser displayed when the tooltip is triggered.

This is the code I am using:

<div class="tooltip" title="hi">test</div>

    $(document).on("mouseover", ".tooltip", function(event){
        var $this = $(this);
        $this.tooltipster({
            delay: 100,
            updateAnimation: false
        });

        $this.tooltipster('show');
    }); 

Great script, thanks for the effort!

When one changes the content of a tooltip, the tooltip grows and shrinks to catch the user's attention. This great effect is established using CSS3's transform: scale(1.1, 1.1) and transition-property: transform.

The latter is hard coded in the javascript, I suggest to change the transition-property for updateAnimation from transform to ie. all, this way users can alter the styles of CSS class .tooltipster-content-changing ie. to fade out / in instead of scale.

Or at least allow the user to choose between animations, ie. 'scale', 'fade', etc.

Thanks again!

Hey guy,

I am using tooltipster like this:

var content = $("#game_tooltip_template").detach().html();
$(".game").tooltipster({
    functionReady: function(origin, tooltip) {
        tooltip.find(".profile_select").select2({
            minimumResultsForSearch: Number.POSITIVE_INFINITY
        });
    },
    content: content,
    theme: '.tooltipster-shadow',
    position: 'bottom',
    interactive: true,
    trigger: 'click'
});

As you can see I specified "functionReady" to call select2 (great jquery select plugin) after the initialization of the tooltip.
Now, my issue is, that when I click on the it is hiding my tooltip, instead of showing me the content and the tooltip.

What is wrong? I think it's a bug.

PS:
It's also happening without select2, so it's not the select2 plugin.

Add Math.round() to all inline CSS styles values which are in pixels.
The CSS transition in Web-kit browsers makes the little arrow move if the the inline css widths and positions are not integers.

Hello!

I am a new user of this awesome tool. I'm testing it in our website and i've just seen one possible bug.

First of all, what we want is:
1.- The website has a button that opens a modal fancybox (with a form in it)
2.- That form is validated using jquery.validator
3.- Tooltipster is integrated in jquery.validator: a tooltip is shown when an error is found in the form
4.- If you click out of fancybox modal, it is closed.
5.- Usign fancybox callback (afterClose), we reset the whole form, reset every error found with jquery.validator and want to close every tooltip created before.

Everything is working fine, but I have a little problem that maybe is a bug of this tool.

Steps to reproduce it:
1.- Open jsfiddle -> http://jsfiddle.net/kE2Ut/1/
2.- Click on "Open fancybox" and a modal will be opened with a form inside it.
3.- Click on "OK!" without filling the inputs. jquery.validator will refuse the submit and two tooltips will be shown.
4.- Click out of the fancybox div (in the black area). Fancybox windows will be closed and tooltips will be hidden using the fancybox callback afterClose.
5.- Click again on "Open fancybox" and click "OK!" without filling the inputs. jquery.validator will refuse the submit BUT NONE TOOLTIP IS SHOWN.
6.- Ok, click another time out of fancybox div (black area).
7.- Click again on "Open fancybox" and click "OK!" without filling the inputs. jquery.validator will refuse the submit AND TOOLTIPS WILL BE SHOWN AGAIN.
8.- If you repeat these steps, every other time will run perfectly... It only fails the second time!

To show the tooltip, I use:
$(element).tooltipster('update', $(error).text());
$(element).tooltipster('show');

Where "element" is the input affected by jquery.validator.

To hide them, I use:
$('body').tooltipster('hide');

This way, every tooltip on the body will be closed.

Is this a bug or I am doing something wrong?

Thanks!

EDIT: Updated jsfiddle :)

Hello.

I love your plugin and I want to use it instead bootstrap or foundation tooltip's plugin.

Bootstrap allow you to show the tooltips after new ajax content in this way:

$('body').tooltip({
    selector: '[rel=tooltip]'
});

It is possibile? There is a way, now?

I built this function to pass to your config param for 'position', maybe this calculation can happen internally?

If you add this you can see now the tooltip will go top,bottom,left and right according to your window restrictions.

auto_popover = function(element, width, height) {

var $element,
    actualHeight,
    actualWidth,
    bound = {},
    elementAbove,
    elementBelow,
    elementLeft,
    elementRight,
    isWithinBounds,
    pos,
    placement = {};

isWithinBounds = function(elementPosition)
{
    var pos =  {
        above : bound.Top < elementPosition.top,
        below : bound.Bottom > (elementPosition.top + actualHeight),
        left : bound.Left < elementPosition.left,
        right : bound.Right > (elementPosition.left + actualWidth)
    };
    return pos.above && pos.below && pos.left && pos.right;
};

$element = $(element);

pos = $.extend({}, $element.offset(), {
    width: $element.outerWidth(),
    height: $element.outerHeight()
});

actualWidth = width;
actualHeight = height;

bound.Top = $(document).scrollTop();
bound.Left = $(document).scrollLeft();
bound.Right = bound.Left + $(window).width();
bound.Bottom = bound.Top + $(window).height();

elementAbove = {
    top: pos.top - actualHeight,
    left: pos.left + pos.width / 2 - actualWidth / 2
};
elementBelow = {
    top: pos.top + pos.height,
    left: pos.left + pos.width / 2 - actualWidth / 2
};
elementLeft = {
    top: pos.top + pos.height / 2 - actualHeight / 2,
    left: pos.left - actualWidth
};
elementRight = {
    top: (pos.top + (pos.height / 2)) - (actualHeight / 2),
    left: pos.left + pos.width
};

placement.above = isWithinBounds(elementAbove);
placement.below = isWithinBounds(elementBelow);
placement.left = isWithinBounds(elementLeft);
placement.right = isWithinBounds(elementRight);

where = "top";

if( ! (placement.left && placement.right && placement.top && placement.below) )
{
    if(placement.top && placement.below)
    {
        if(placement.left)
        {
            where =  where + "-right";
        }
        if(placement.right)
        {
            where =  where + "-left";
        }
    }
    else
    {
        if(placement.top)
        {
            if( ! (placement.left && placement.right) )
            {
                if(placement.left)
                    where = where+"-right";

                if(placement.right)
                    where = where+"-left";
            }
        }
        else if(placement.below)
        {
            where = "bottom";
            if( ! (placement.left && placement.right) )
            {
                if(placement.left)
                    where = where+"-right";

                if(placement.right)
                    where = where+"-left";
            }
        }
        else
        {
            where = "bottom";
            if(placement.left)
                where = "left";

            if(placement.right)
                where = "right";
        }
    }
}

return where;

};

Hello, the tooltipster.jquery.json file tells us the licence of the plugin is opensource MIT, whereas the lib file says "Copyright (C) 2013 Caleb Jacob".

Could you please state the licence in the main file ?
Thank you.

Sorry to drudge this issue back up
#19

In this implemented fix:
$(window).on('mousemove.tooltipster', function() {
touchDevice = false;
$(window).off('mousemove.tooltipster');
});

Unless I'm missing it, this depends on the user moving the mouse between the binding of that event and the running of the init function. Otherwise the original issue remains. Not sure just yet if there's a logical way to more reliably test presence of a mouse though.

Reported by @alesnav, confirmed in CHROME :

jsfiddle: http://jsfiddle.net/kE2Ut/3/

I've added a new condition to validate the second field: it must be a number.

Steps to reproduce the problem:
1.- Click on Open fancybox
2.- Fill in the second field (edit2) with, for example "a"
3.- Click on the other field. A tooltip will be shown because "a" is not a number, but that tooltip will be placed in the middle of the form, instead of on the right of the field affected.
4.- Now, if you write something in the other field (edit1), leaving the other field filled with "a", and click "OK!", both tooltips are placed in the right position.

So, this bug will appear only if one tooltip is shown.

Thanks!

When using tooltipster with a maxWidth and box-sizing : border-box; css, then a word wrap issue occurs for tool tips with a width less than the maxWidth. Here is a jsfiddle to demo the issue.

Changing line 585 in jquery.tooltipster.js from
'width': tooltipInnerWidth + 'px',
to
'width': tooltipWidth + 'px',

resolves the issue for my application. I'm not sure if that is the correct change to make but seems to work in my case.

I know there are some documented issues between jquery and box-sizing, so perhaps upstream fixes will eventually resolve the issue.

Is there a way to disable animations of the tooltip when it is loading? I mean I do not want any fading or grow etc... How can I do that?

When browsing with small windows, after opening a tooltip, the page is no longer scrollable horizontally.

"overflow-x: hidden" is added to the body but is never removed.

Hello, i have wrote my problem again but meantime i had some adjustments so link wasn't working.

Here is demo http://www.koma.hr/test.php

Problem is that tooltip is showing strange around title that is need to be tooltiped, i have searched for problem over css but no luck.

Tooltipster detects touch screen devices by testing for ontouchstart support and then binding only touchstart for showing tooltips. I think this is the wrong approach: if you're using a laptop with a touchscreen the plugin is going to fail while using a touchpad or mouse, which is a showstopper.

Replacing all references to touchstart with click would be one solution.

I am using Tooltipster on elements within a Fancybox modal. Some of these are on hover and some of these remain visible for form errors. One is used specifically when you hover over the "close box" icon.

I've discovered that when you close the Fancybox, the tooltips remain on the screen. This is unavoidable when you use the close icon which also contains its own "close box" tooltip. It remains on screen with absolutely no way to get rid of it since the original element is no longer available to hover away from.

I don't know if this is a bug or a feature request. Since the box is closing, you are no longer "hovering" over the "close box" icon... shouldn't the tip automatically disappear too? (bug?)

As far as the tips that remain on the form errors, I'd like to see those vanish when the form itself vanishes within the closed Fancybox. (feature request?)

For the time being, I'm targeting each element individually in order to remove the tooltip inside of a Fancybox callback function. This is getting messy really quickly since I see no way to target all tooltips all at once within a parent container.

$('#each_target').data('plugin_tooltipster').hideTooltip();

And now I'm finding that if the target's tooltip does not exist, .hideTooltip() throws an error and nothing else works. So to close Tooltips programatically, they have to exist and they have to be targeted specifically. Like I said, this is getting really messy and growing.

I'm used to qTip2 where I could call a destroy method on any parent container and it simply removed any active Tips, if none, it simply did nothing.

Thank-you! (qTip2 totally gone from one website so far)

For input elements, you can add trigger focus
if (this.options.trigger == 'focus') {
$this.focusin(function() {
if (($this.data('tooltipster') == '') || ($this.data('tooltipster') == undefined)) {
object.showTooltip();
}
});
$this.focusout(function() {
object.hideTooltip();
});
}

In tooltipster.jquery.json it mentions GPL, and no other mentions of licensing terms anywhere. Is this plugin really GPL (i.e. impossible to use in commercial sites)?

Hi, It seems tooltipster is not working on fresh install of Android 4.4 (on a nexus tablet, 1st version), with Chrome : when touching the html tag binded to tooltipster, nothing happen.
It does work with Firefox on the same device.

I am initializing tooltipster on elements like so:

            // init tooltipster on class 'tooltip'
            $('.tooltip').tooltipster({
                delay:500,
                interactive:true
            });

When time comes to disable tooltipster on select elements, I try to 'destroy' or 'hide' tooltipster from those elements:

            // remove tooltipster from class 'myClass'
            $('.myClass').tooltipster('destroy');

But the tooltips don't get destoryed or hidden. I even tried removing the title attribute from the element, confirmed the title was gone from the element by using the Dev Tools built into Chrome and IE, but the tooltipster keeps firing tooltips on those elements.

What am I doing wrong? How do I remove a tooltip from an element?

Hi, it would be great if people who use Tooltipster could upgrade to the next planned version, which is 2.3.0, and tell us if everything works fine for them.

This next version is sitting on the 'dev' branch of the project. Also, from now on, please make your pull requests based on this branch.

Tooltipster has been refactored and enhanced for v2.3.0 and your help in testing would be appreciated until we can get automated tests up and running.

Hopefully nothing should break after you upgrade, but if it does, please take a look at this page here first #75. If you think you use Tooltipster by the book and still see an issue, please make us a bug report. Thank you.

I use latest tooltipster (minified) with jQuery 2.0.3.

I load the following code by AJAX:

<div class="someclass" title="<img src='some.jpg' style='width:20px;height:20px;' /><p style='float:left;padding-left:1em'>Dynamically generated text</p>">Random text</div>

With $('.someclass').each(function() { $(this).tooltipster(); });, the tooltip is generated but it only displays the image, not the paragraph. Any clue why?

<div id="parent" title="parent tooltip" style="width: 500px">
    PARENT!
    <div id="child" title="child tooltip" style="width: 100px">
        CHILD!
    </div>
</div>

If you hover the child element directly, all cascaded tooltips will show.
Neither explicit setting of "onlyOne" nor a different delay for the child-tootlip will help.

Is it possible to show only the one from the child without writing own hover-triggers?

The following jQuery function may be causing it:

function vendorPropName( style, name ) {
    // shortcut for names that are not vendor prefixed
    if ( name in style ) {
        return name;
    }
    var capName = name.charAt(0).toUpperCase() + name.slice(1),
        origName = name,
        i = cssPrefixes.length;

    while ( i-- ) {
        name = cssPrefixes[ i ] + capName;
        if ( name in style ) {
            return name;
        }
    }

    return origName;
}

I wasn’t sure if this should be asked here or on jQuery forums, but the guys from their IRC channel directed me here.
Here’s a demo SVG file with a reproducible error.

Putting

        console.log("1 name — "+name);
        console.log(style);

after

function vendorPropName( style, name ) {
    // shortcut for names that are not vendor prefixed
    if ( name in style ) {

will demonstrate the difference in behaviour between HTML-embedded SVG and SVG that has internally defined or linked scripts. And console.log(style.indexOf(name));
will return TypeError: style.indexOf is not a function in both cases.

(And for a reference, here is also a relevant question on Stackoverflow.)

Great work, thank you for the plugin :)
Maybe you should put the documentation on GitHub too so we can help you update it. It's a pity that it keeps you from pulling requests when you don't have time to update the doc yourself.

Hi there,

I've got a tooltip attached to an anchor, with the tooltip loading content from the anchor's href target (an ID on the same page):

  $('.footnote')
    .click(function(e) {      
      e.preventDefault;
    })
    .tooltipster({
      content: '',  // Empty content by default - @see functionBefore
      interactive: true,
      trigger: 'hover',
      timer: 10000,
      maxWidth: 350,
      functionBefore: function(origin, continueTooltip) {
        var $footnote = $($(origin).attr('href'));
        if($footnote.length > 0) {
          origin.tooltipster('update', $footnote.html());
        }
        continueTooltip();
      },
    });

I've added the .click() to prevent the default link/page jump behaviour but it seems in doing so, this makes the tooltip fire inconsistently on mobile/touch devices.

Without the .click(), the problem does not occur.

Is there a means to prevent default when attaching tooltips to anchors?

Thanks!

hello i have intergrated tooltip in my app and it is showing weird.

Can somebody help me ?

www.koma.hr/test.php

I'd like a way to change some Tooltipster settings globally. I find that I'm repeating certain settings for every single instance of .tooltipster({options});

For example, with qTip2, I could globally use this function and then every separate instance of the plugin would be ready to go:

$.fn.qtip.defaults = $.extend(true, {}, $.fn.qtip.defaults, {
position: {
my: 'left center',
at: 'right center'
},
style: {
classes: 'ui-tooltip-dark ui-tooltip-rounded',
}
});

Is there something similar I could use with Tooltipster?

Thank-you!

For some reason, clicking the same element that triggered the open is not triggering it to close now. When I size my browser to the point that I've set up this functionality in, it works but when I open in the iPad (which is what I'm developing for) it doesn't close the tooltip now. Is there a use case that shows how I can either fix this or add a close icon to the trigger when it is open that when clicked will make the tooltip close. I was looking at the API but didn't see a way just to update specific tooltip options and not just update the content.

I'm trying to use "position: 'bottom'" and the tooltip is rendering a few miles off the bottom edge of the viewport...

http://jsfiddle.net/zyqjD/1/

I'm seeing this in Chrome, Safari, and Firefox. In Chrome & Safari, you can't see any tooltip without scrolling down to the very bottom of the page. In Firefox, one tip renders up top and another one is down on the very bottom.

Thank-you!

Can anyone offer advice or a working example. I have added Tooltipster with an AJAX query to an MVC controller/action that should be loading a partial view into the tooltip. The data for the partial view is being returned to the jquery script (can observe it in alerts and Fiddler), but the tooltip is just not updating from the initial "Loading...." content. Tooltipster is pretty awesome and I would really like to use it for this purpose. Anyone have advice? Or a working example (with MVC)?

jQuery code:

$('.ttaddasset').tooltipster({

theme: '.tooltipster-noir',

animation: 'grow',

position: 'right',

content: 'Loading...',

trigger: 'click',

functionBefore: function (origin, continueTooltip) {

var selectedGrp = origin.attr("value");

continueTooltip();

if (origin.data('ajax') !== 'cached') {

$.ajax({

type: 'POST',

url: '/WebsiteStudio/WindowContent?assetgrp=' + selectedGrp,

success: function (data) {

alert(data);

origin.tooltipster('update', data).data('ajax', 'cached');

alert(data);

}

});

}

}

});

});

I read somewhere that including HTML inside a title attribute (or any other attribute for that matter) is bad practice.

Perhaps you should wrap the HTML in some CDATA / Character data?

For example:

<span id="demo-html" title="<![CDATA[ <img src='images/spiderman.png' width='50' height='50' /><p style='text-align:left;'><strong>Soufflé chocolate cake powder.</strong> Applicake lollipop oat cake gingerbread.</p>]]>">Hover</span>

What versions of jQuery do you support?

Hi Caleb,

After much fussing around, I got things working better here...

http://jsfiddle.net/RZkHX/

success: function (label, element) {
$(element).data('plugin_tooltipster').hideTooltip();
},
errorPlacement: function (error, element) {
$(element).data('plugin_tooltipster').options.content = $(error).text();
$(element).data('plugin_tooltipster').showTooltip();
}

However, there is one final issue I hope you can help me with. I cannot seem to get the message inside the tooltip to update itself dynamically.

If you click submit, the message on the first field is "required". However, as soon as one letter is entered in the first field, the message should change to "please enter at least 5 characters". Conversely, if the message says "please enter at least 5 characters" and the content of the field is deleted, the message should change to "required".

I'm just trying to get the content of the tooltip to actively reflect this default behavior of the messages.

You can see the default behavior of the messages...

http://jsfiddle.net/W5EeZ/

Thank-you again!

Hi Caleb,

Thanks for your help earlier today.

I now have the issue narrowed down to something very specific. Every time you enter another character in the field, the tooltip toggles on/off, where it should stay on as long as there is a pending error.

I've narrowed it down to this line...

$(element).data('plugin_tooltipster').showTooltip();

If the tooltip is showing while I execute that line, instead of staying on, it turns off. Is this a bug? It's as if "showTooltip()" is behaving like a "toggleTooltip()"

See: http://jsfiddle.net/QrJSQ/

Thanks again.

i need to send the title attribute while the content is loaded via ajax in this plugin.
i cant figure out how to get the attribtue.

This example works perfect:

$('field1').tooltipster({
   trigger : 'hover',
   onlyOne : false,
   position : 'right',
   content : 'hi from content'
}).tooltipster('update', 'hi from update');

But this fails:

$('field1').tooltipster({
   trigger : 'hover',
   icon : '(?)',
   iconDesktop : true,
   onlyOne : false,
   position : 'right',
   content : 'hi from content'
}).tooltipster('update', 'hi from update');

The first example declare its content using options, the second uses the API but does not change the text, always showing 'hi from content'

Hi,

I have to change line 508 to

var tooltipInnerWidth = tooltipster.innerWidth() + 4;

to force those browsers to not insert additional text line.

Do you know what causing the issue?

Hi,

I see this was previously an issue (Issue 41). I'm experiencing the same problem with an iPad on a site I'm developing (using Tooltipster 2.2.3).

The problem of not being able to close the tooltip on iPad is also apparent on the 'click' demo here:
http://calebjacob.com/tooltipster/#demos

When I try to have a single Image as a tooltip, the Image is not being positioned correctly if I use the fixedWith attribute.

I am able to fix the Issue, when I give the Image itself a class and style the width and height of the image inside the css.

Example:
Go to http://calebjacob.com/tooltipster/#demos and paste:

$("#demos li span").tooltipster("destroy").tooltipster()

in console.

If I open a tooltip and then while that tip is left open, dynamically change the page layout, the tooltip will not move along the page with its target. In other words, if the tip is pointing at a text field and then if I dynamically add another text field above it, the tooltip does not shift down along with its target.

There is more detail here along with a jsFiddle demo. Just focusing on the second bullet point:

http://stackoverflow.com/a/19277726/594235

Thank-you!

Here is a suggestion to change how tooltips close when using interactiveAutoClose = false, feedback is welcome before implementation.

Currently, interactiveAutoClose only takes effect when the trigger event is 'hover' and if the mouse has actually come over the tooltip to start interaction.

I suggest that 1) interactiveAutoClose applies as soon as the tooltip is shown, and 2) also applies when the trigger is 'click'.

Basically, it means that when interactiveAutoClose = false and once the tooltip has shown, only a call to the hide method could close it.

As for the 'click' event case : currently, when a tooltip is shown, you have to click again on the element to hide it. Besides, setting interactiveAutoClose = false will currently not prevent the tooltip from being closed by the user.

What I suggest for 'click' is : another click anywhere in the page will close the tooltip. If the tooltip has interactive = true, clicks inside the tooltip itself will not close it though. If interactiveAutoClose = false, no clicks anywhere can close the tooltip (as I said, only a call to the hide method can).

Basically, this change on interactiveAutoClose is about the plugin saying "don't count on me to auto-close the tooltip in any case, do it yourself". No more exception "but only if you move the mouse over the tooltip and if you have used 'hover'". It seems logical but some edge cases could need adaptation after that change. Let me know if you see any cons to this.

Thanks

It would be handy if there was an option to select what attribute of the element was used or that the title of the element can remain.

This might be handy in the following example:
I have a jQuery validator, that is displaying it's error messages with tooltipster. However, I can't have a title on my input elements since tooltipster removes these even though they aren't used (they are overwritten by the validator).

Hey! This plugin is amazing. That said, I've got the images to load on the first rollover but way off their mark.
Second rollover is just fine...
If you wanna see my work in progress the tooltips are on the map image at pokeastickdemo.tk - thanks!

<div id="kalapanapos" class="tooltip" 
     title="<img src='http://www.pokeastickdemo.tk/wp-content/uploads/2013/04/insured-badge-distressed-orange-tilted.png' 
     alt='' width='100' height='100'/>"

        <a rel="tooltip" href="#">
            <img src="http://www.pokeastickdemo.tk/wp-content/uploads/2013/05/dot.png"/>
        </a>
</div>