In my build I concatenate the files. Before I build protip works, after the build my app does not work.

For now I fixed this by putting the minified javascript content inside an iife:

(function () {
    // protip code
}());

I tried to implement this plugin in symfony(webpack encore).

but it reflects below issue:

WAIT Compiling... 12:58:04

ERROR Failed to compile with 7 errors 12:58:09

These relative modules were not found:

• ./Buffer in ./node_modules/protip/protip.min.js
• ./Class in ./node_modules/protip/protip.min.js
• ./Constants in ./node_modules/protip/protip.min.js
• ./GravityParser in ./node_modules/protip/protip.min.js
• ./GravityTester in ./node_modules/protip/protip.min.js
• ./Item in ./node_modules/protip/protip.min.js
• ./PositionCalculator in ./node_modules/protip/protip.min.js

this to very urgent, plzzzzzz sort it out.

If you look at the generated css file the border-color property contains the word 'invalid' instead of an actual color this makes the property invalid (at least in chrome)

Hi,
How to retrieve title and other data attributes from protip instance on protipshow event.

$('.protip').on('protipshow', function(ItemInstance){
    console.log(ItemInstance.currentTarget.ptTitle, 'title');  //showing undefined
 });

Couldn't figure out how to include data-pt-* values in the 'defaults:' section during intitialization:
/** @type Object Default data-pt-* values for a tooltip */
defaults: {...}
Could you please add an example?
Thanks in advance!

Hello again :)
Can you please add information to the "protiphide" event to understand that it is called from "Onresize" event?
I need to know that protiphide event was launched from resizing or other events.
I made "dirty hack", but don't know, how doing it properly :)

Hi,
Protip works fine on desktop and Androïd devices, but seems to have problem on ios devices.
I have set protip like this :
el.protipSet({
trigger: 'click'
});
Works on desktop and Androïd devices, but not on safari on my iphone, tooltip no appear when i click on element.
Do you know this bug on iOS ?
Thanks for your help.
Regards.

I'm calling protipShow() on an SVG element. It works fine on desktop. But on mobile (iOS), the "top" portion of its style returns a negative value, positioning it off the screen. If I instead target a non-SVG element, the positioning works fine on mobile.

Is there a way to reinitialize the plugin after loading content with ajax?

Thank you

// Custom hide event
el.on('protiphide', function(ItemInstance){});

this event is fired up on initialization.

On mac. When switching to hover or click mode, it doesn't appear.

Hi! Could you make Protip available on bower?

I think this is a bug. If I add overflow-x: hidden to my CSS and I have protips that go beyond the top fold of the page, the bottom protips show up but in their original non-scrolled location and thus can't even be seen on the screen.

Here's an example and if you scroll down in render area and hover over any of the Tip words near the bottom of page, you won't see a protip:
https://jsfiddle.net/ouamhaw9/4/

And here it works when I comment out overflow-x: hidden:
https://jsfiddle.net/ouamhaw9/5/

Scenario: I am displaying img1 on mouseenter of img2 and having your tooltip to be displayed when img1 is hovered.

When there is a mouseleave of img2, I am removing img1

Problem: when img1 is hovered protip is displayed and if I hover of protip it is causing a mouseleave to be triggered and I am lossing img1 even though the mouse is still on top of img2. Also, your protip is still being displayed.

I think it makes sense to have the selector's text as the default one for the tooltip. Bootstrap does this, too.

Also, what does $(this) refer to? I tried to make the element's text the default title (see code below), but this solution didn't work.

$.protip({
    selector: '.jstree-anchor',
    defaults: {
        title: $(this).text()
    }
});

I'm a punk and I don't want to include jQuery, just import this nifty plugin into my ES6-based website, to use it on the gorgeous mutation-observer way. What should I do ?

Similar to #13, but for the gravity attribute. It'd be nice to set these for every tooltip once.

<a href="#bar" class="protip" data-pt-gravity="left" data-pt-title="You must be at least 18!">
    Go to the bar!
</a>

This config will still let the tooltip appear on the right side. Please advice...

Hello i have this situation, i have a text area with maxlength = "200" so, what i need is change the title of the protip when the textarea key up, and show; Max lenght 200, 199, 198... etc, i tried changing data-pt-title attribute and i tried removing and adding the class, but nothing works, can you help? sorry for my bad english. i mean something like in jqueryUI.. : $( ".selector" ).tooltip( "option", "content", "Awesome title!" );

Very rare use case, but it can happen:

1, add a Protip with autoHide : x ms
2. add .on('protiphide' event handler

If I hide the protip within x ms, then the protiphide event should be destroyed, in my humble opinion.

It'd be nice if you could set a max-width for all of your tooltips at config time instead of having to specify each one individually.

Hello,
I have following in my code

<div class="con exists" id="Section1">
    <input id="course_slide" maxlength="250" type="text" name="slide1" />
    <a class="ic-btn add protip" data-pt-position="top"  data-pt-scheme="aqua"  data-pt-title="Add"  id="addLabel_slide" onclick="add();">
        <span class="glyphicon glyphicon-ok"></span>
    </a>
</div>

It displays proper on hover of element, But after one ajax call inside add() function , I remove this div using jquery but it still displays tooltip. Note : If i click f12 then it hides.

this.data.title.charAt is not a function

StackTrace

could you give me an example of that? I have read the code, but I can't figure out

I am working on project with tooltip elements getting removed by multiple reasons by different-2 functions.

Is there any global/shared function to removed/hide the remaining tooltip of removed element?

It works before but I just noticed these CDN URLs mentioned in the README.md no longer work:

• https://min.gitcdn.xyz/repo/wintercounter/Protip/master/protip.min.css
• https://min.gitcdn.xyz/repo/wintercounter/Protip/master/protip.min.js

Any idea why Protip plugin causes tablesorter plugin to sort table really slow? Once I remove the Protip file, tablesorter plugin goes back to sorting almost immediately. I do have various buttons in the table which use Protip, so just wondering if Protip is somehow re-rendering something each time table is sorted?

Add batch execution for performance gain when using observer: true and a bunch of changes at once. See #32

After getting rid of html title=... across my app and replacing things with protip, I noticed my body was overflowing on the x-axis. Some digging around revealed that for those elements aligned on the right of the page (things like a user/settings dropdown tucked into the upper right) the protip-container was causing an overflow.

The simple fix is to explicitly declare target="body", but this negates the advantage of using true along with observers, which ensures that the tooltip dom elements are removed when no longer needed. I don't like a polluted dom, and protip's approach is a 1-to-1 instead of a 1-for-all (curious as to why this is... is it ever possible to have more than one tooltip open at one time? If not, you could just reuse the same container and save quite a lot of dom manipulation), but that's besides the point. Adding a tooltip shouldn't cause an overflow of the whole app.

How can i make the displayed text reactive?
I am using this with vue and vue-i18n, a translator.
I am passing the data from computed into :data-pt-title="sTooltip"
and sTooltip is in the computed object that returns this.$i18n.t('path-to-text')

The CDN link in the readme no longer works

Hey,

when installing protip through bower only the minified and bundled versions of the script are downloaded. However, when requiring either of them via AMD they also try to require Item.js, Class.js etc. Is there any reason to it? Why the minified, production-ready script still needs other dependencies?

The only solutions that come to mind are either adding sources to bower configuration or removing dependencies altogether from the minified version - could that be implemented?

Hey there,

After evaluating 5 serious contenders for a good tooltip, I settled on Protip. I'm trying to use NPM to fold the library into my app code, but I keep getting 'Error: Cannot find module 'browserify-shim' from '{...removed...}/node_modules/protip'. I see you have the shim listed as a dev dependency, but I couldn't get it to work until I declared my own package.json to use the shim as a dev dependency as well. Thoughts?

Hi! I have edge case :)
Currently gravity calculated on width/height page (window) itself. If tooltip outside of window area, it recalculate gravity and change position of tooltip.
Is there any way to change calculating gravity from window itself to block on page? For example: if tooltip outside of block area, it recalculate gravity and change position of tooltip.
Thank you again for this awesome plugin :)

Hi i found your awesome plugin, and try to use in my project. For example: i have some links with tooltip on page, tooltip triggering by click. If I click on the first link, and then on the second, both tooltips are visible.
How i can show only one tooltip at a time? Custom show event or is there a better solution?