atomiks / tippyjs Goto Github PK

Hi, thank you for that plugin.

How I can use CSS text-align property in tooltip? When I try to use that code in my HTML template like

<p style="text-align: left">....</p>

Code was anyway centered?

Hello,

I use Webpack 2 to import Tippy, just with an alias:

resolve: {
    alias: {
      'tippy$': 'tippy.js/dist/tippy.js',
    }
}

Then when creating a new Tippy instance:

import Tippy from 'tippy.js'
//...
new Tippy('.test', {
    html : document.querySelector('#test')  //It works fine with just the selector '#test'
})

I got the following error:

TypeError: Converting circular structure to JSON
    at Object.stringify (<anonymous>)
    at Tippy._applyIndividualSettings (webpack:///./~/tippy.js/dist/tippy.js?:2653:47)

It seems the HTMLElement is passed through the JSON.stringify method.

I have doubts on my way to import Tippy with webpack, but I'm running out of things to try..

Hi,

I just tried to install your library via NPM

npm install tippy.js

and import it like this:

import Tippy from 'tippy.js';

But I get a lint error after importing the lib. I'm using browserify for the bundling. Lint error looks like this:

SyntaxError: Unexpected token (4:7) while parsing /node_modules/tippy.js/src/js/tippy.js while parsing file: /node_modules/tippy.js/src/js/tippy.js
    at DestroyableTransform.end [as _flush] (/node_modules/insert-module-globals/index.js:96:21)
    at DestroyableTransform.<anonymous> (/node_modules/readable-stream/lib/_stream_transform.js:115:49)
...

After changing the path in your package.json for "main" to "dist/tippy.js" it works. But I don't think that's the way you would like to have it.

Cheers
Stefan

Hi, I decided to use your lib and had found some strange behaviour when target element is inside block with scrollable overflow and body is scrolled too.

Here is screenshot http://prntscr.com/f0ks7j.

How to reproduce:

1. Goto https://jsbin.com/cuvagihudu/edit?html,css,js,output
2. Scroll body to the end.
3. Scroll .container to the end
4. Hover "Hover me, i'm broken!" button and check the position of the tooltip.

Looks like this case doesn't take into account the body's or document's scrollOffset

I originally wasn't sure if it was even open source or available on github because there is no obvious mention of github on the website (so it seems).

I'm having a tooltip template which I add to some elements in the document ready event.
Is it possible to add that tooltip to dynamically created elements that are generated afterwards?

Hi,

I am trying to use tippy inside table rows and am having no luck getting it to work. I am looking at this error: floating-ui/floating-ui#276 which seems to be what's happening to me. Any ideas how to bypass/fix this? I'd really love to use this plugin.

Thanks,
Rok

When you have multiple tooltips that are activated by clicking on them, clicking on one them will not cause the other one to close.

The following code:

$('#js-tooltip-project').attr('title', data.data);

const instance = new Tippy('.js-tooltip', {
position: 'right',
arrow: true
});

const popper = instance.getPopperElement(document.querySelector('#js-tooltip-project'));

instance.update(popper);
instance.show(popper);

<button class="js-tooltip" id="js-tooltip-project" title="x"></button>

Gives me the following error:

Uncaught TypeError: instance.update is not a function

I know that bower is kind of obsolete these days, but it would be great if you could provide a bower package.

Not sure when it broke; I've reverted to v0.11.x for svg support. In latest version (v0.16.x), svg elements will not show tooltips

I think it would make sense to rely on npm to automatically get new versions and reduce the library size during installation (avoid dupe downloads of Popper)

Popper now allows for specifying a custom object instead of a DOM node for positioning.

Would it be possible to allow passing in a Popper instance instead of a DOM element, i.e. new Tippy( popper )? If not, maybe instead pass the reference object instead of the DOM element, i.e. new Tippy( popperRef )?

Thanks

Ref : cytoscape/cytoscape.js-qtip#28 (comment)

Hello,

I'm trying to use this nice lib but I'm facing an issue : my packager doesn't find the "entry file"
I think you should specify a "main" file in your package.json

https://docs.npmjs.com/files/package.json#main
Example:
https://github.com/select2/select2/blob/master/package.json#L32
https://github.com/jquery/jquery/blob/master/package.json#L6
https://github.com/enyo/dropzone/blob/master/package.json#L12
https://github.com/yabwe/medium-editor/blob/master/package.json#L20

In your case you should do :

"main": "dist/tippy.js",

thanks !

By default you should not include polyfills that bloat the global space, it might make sense to ask users to manually include them, or define them as ponyfills, available only inside Tippy's code

I would like to discontinue Tooltip.js and point users here, but I'm not confident since this project doesn't have any automated tests.

Is it something you are considering to add?

Trying to enabled the custom flip behaviour from Popper. Is it supported? I can't get it to work.

Should I use popper directly?

var popper = new Popper(referenceElement, onLeftPopper, {
    placement: 'left',
    modifiers: {
        flip: {
            behavior: ['left', 'bottom', 'top']
        },
        preventOverflow: {
            boundariesElement: container,
        },
    },
});

https://popper.js.org#example3

Hi !

It would be great if there were a way to check if, into the beforeShown() method (or another one ?), the tippy tooltip can be shown or not ?

Exemple :

beforeshown(state) {
    if(state) {
        tippyInstance.show()
    } else {
        tippyInstance.hide()
    }
}

Regards, 👍

Hey, I love tippy.js, great work. Found it after pulling my hair out trying to do a simple popup with popper.js.

But, when using the custom html template to add content for the tippy popper I wasn't able to do what I needed. I wanted to make an interactive popper that was a list of elements the user could select. It, however, did not work. I tracked it down to the use of innerHTML to copy over the template instead of appendChild. Just copying using innerHTML blew away any event handlers I had and the custom data props I had added to the template html elements.

I've submitted a pull request and would love for this feature to be added. Currently I've got my own modified copy sitting in our app. I'd love to switch it back to using the main npm version.

Thanks and awesome work!

Or perhaps I'm just missing something.

I am using react with tippyjs. My tooltip content is hardly dynamic and interactive. User selecting components and editing it in tooltip. In my scenario tooltip must be show after tooltip content is rendered. My solution is https://github.com/ismail-codar/tippyjs/blob/master/src/js/tippy.js#L478

Usage:

new Tippy(domNode, {
        interactive: true,
        checkShown: (callback) => {
            const tooltipDom: HTMLElement = popup.getPopperElement(popup.tooltippedEls[0]).querySelector(".tippy-tooltip-content");
            //change model for react rendering 
            // ... some codes
            // ... some codes
            setTimeout(() => {
            //and react rendered here refresh tooltip content and call callback for tooltip showing
                if (tooltipDom.firstChild)
                   tooltipDom.firstChild.remove()
                tooltipDom.appendChild(activeTooltip.tooltipDomNode)
                callback()
            }, 0)
        }
    })

If @atomiks can be implement any solution like this integration with react like libraries is will be easy.

And another benefit is client side authority control etc can be done before tooltip open. I think #23 related this.

Current issue that has yet to be resolved as of 0.3.1. When appending a tooltip, the circle sometimes won't transition. It still eventually shows, but it doesn't have the nice transition and is delayed a bit

Repaint works fine on Safari macOS 10.12 (and all other browsers from what I can tell – even IE10 – but iOS is having issues)

Hello,

When using trigger: 'click' and hideOnClick: false, is there any way to prevent tooltip from closing when clicked outside of tooltip?

Thanks for the great library by the way!

https://github.com/atomiks/tippyjs/blob/master/src/js/tippy.js#L932

I think no need remove class "active" if settings.interactiv = false. Or add setting for changing active class name.

I tried adding a title attribute to an SVG circle, but it doesn't work. Is this feature currently available?

Hey,

I believe the hide() function isn't working reliably or I don't understand the documentation.
Am I doing something wrong? https://jsfiddle.net/dmgvcmy8/
(used keyup event to avoid built in event listeners)

Great work on tippy.js btw, one of my favorite libraries discovered over the past month!

I'm trying to place a tooltip on input fields, and it ends up looking like this:

http://imgur.com/a/r16mu

The actual tooltip ends up being well away from the selected input field.

It would be nice if we could choose the tooltip container.

In my case I have some position issue : window scroller that contain another scroller where my tooltips are. If I scroll in by window, the position of the tooltip in the sub-scroller are incorrect...
A solution could be to choose the "container" (or the parent (which will be used to calculate the tooltip position)

Is it possible ?
Thanks

I was really excited to use Tippy by reading the documentation. It dosnt effect the element which you are applying tool tip to. Before i was using a library where it adds the tool tips to :before and :after which effected the DOM. So the problem i am facing with Tippy is that it works fine on some pages. and on some pages its not triggering. The environment we have is

VS2015
KnockoutJS

I intiated the Tippy(.selector) in the head, in the bottom of body. none of that work on those pages. the way i want to use is to have one selector class for Tippy(.tippy) and when i add that class to element which i want to add tooltip to triggers the tooltip. Any suggestions what i am doing wrong. The code is due to legal issues i cannot show on public plateform but can shot snippets.

Currently shifted placement, like 'bottom-start', 'top-end' is actually working, but with several problems.

1. I noticed that arrow is not showing, until I fix some css styles to match x-placement=bottom-start, etc
2. distance option is not working totally in this case

So I am trying to wrap this library around an angular directive so people will be able to use it in angular as well, but the problem that I have is that the html property accepts and ID. Is it possible for the property to accept an HTML element? And than the problem is that this HTML can by dynamic, so if people change something during the lifecycle of a tippy, it should be changed. Any idea or workaround for this? Thanks

P.S. I can make all the other functionalities so I can publish it and you can add a link to it as an angular2 version. But I really want to support all the functionalities

To improve performances on the most common use case (a single tooltip displayed on the page)

Currently mouseenter is the main event but there's the Touch and Pointer Events API to consider. I think Surface tablets use the Pointer Events API and not Touch. There's also issues with iOS devices when using mouseenter and click since it needs to be a clickable element which requires the cursor: pointer hack, not exactly ideal.

Hi,

Love this soo much, incredibly user friendly and great documentation. I'm just trying to style the arrow a different colour, how would one go about doing such a thing.

I've got this in here:

.tippy-tooltip.mythemename-theme [x-arrow] {
/* Your arrow styling here. */
}

But both background / background-color and color both don't change the arrow colour.

Jake.

Webpack is awesome to bundle apps, but for libraries Rollup is the recommended bundler because it creates smaller bundles.

I think you should switch to it to reduce the weight of the library, also, you should set Popper.js as external dependency in the Rollup configuration, doing so people will have to manually include Popper.js and Tippy.js, with the ability to decide which version to use.

I updated the js file from V0.11.2 to the latest released v0.16.1 and it didn't work for me, the css is good.

Chrome V 58.0.3029.110 (64-bit)
Mac OS Sierra 10.12

Is there way to now the width of the current tooltip and set the offset based on that?

Basically I'm trying to shift the tooltip by the x amount of pixels not from the center of the element but from the edge, regardless of the amount of text and width of the tooltip.

Thanks!

Hello,

I'm a server-side old-fashioned web developer and I'm a newbie to Javascript compiling, bundling and stuff like that. I noticed that Javascript proejcts usually provide a dist directory with the compiled version of the library they develop, could this project do it too? It would help people like me who don't have Webpack / don't know how to configure it / tried and failed.

EDIT: I noticed there is a production version, but it's not provided when I run yarn install tippy.js (yarn is actually the Javascript dependency manager I'm using at the moment), could them be inlcuded in the repository?

Thank you for your attention and for the library too :) sharing is caring!

Right now you have some custom logic:

https://github.com/atomiks/tippyjs/blob/master/src/js/tippy.js#L318

But you may simply use Popper.js passing an object with the mouse coordinates instead of a DOM node.

https://popper.js.org/popper-documentation.html#referenceObject

Doing so, you would get all the functionalities provided by Popper.js for free.

this would make it easier to wrap this library with angular et al

I think it would be better if you could just do something like:

Tippy(...) instead of new Tippy(...)

export default function tippy(selector, settings) {
    return new Tippy(selector, settings)
}

This is still backwards compatible so that calling new Tippy() has the same effect as Tippy() (UMD module name remains the same, so global.Tippy is the exported lowercase factory function).

Currently dist folder contains minifed codes.
Mostly users need unminified code on their development environment for debugging. Users already minified all codes when theirs own production build.

Please provide unminifed code on dist folder.
In package.json "main": "dist/tippy.js" may be address unminified code.

Hi !

First, thanks for your great tooltip library :)
I don't know if my problem comes from tippy, vuejs, webpack.. So i try my chance here ^^

I'm trying to create a vuejs directive, to generate tippy tooltips into my SPA (compiled with webpack2)

My Vuejs Directive file :

import Vue from 'vue'
import Tippy from 'tippy'

Vue.directive('tippy', {
        inserted(el) {
            const tooltip = new Tippy(el, {
                arrow: true
            })
        }
})

In my Webpack.config file, i created an alias to resolve the tippy.js dist file only, cuz i don't want to import the scss file too :

...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js',
      tippy$: 'tippy.js/dist/tippy.js'
    }
  }
...

When compiling, Webpack returns an error :
TypeError: _tippy2.default is not a constructor...

WORKAROUND :
If i include tippy.js into my index.html file, and remove my import Tippy from 'tippy' in my directive file tooltips works !!

index.html :
<script src="node_modules/tippy.js/dist/tippy.js"></script>
My directive file :

import Vue from 'vue'

Vue.directive('tippy', {
        inserted(el) {
            const tooltip = new Tippy(el, {
                arrow: true
            })
        }
})

My wish is to include Tippy from my directive file, and remove it from my index.html file.
Please can someone could telle me where i am wrong ?
Thanks :)

Instead of using the docs website as archive

Currently this just refers to the callbacks object in the class which doesn't seem very useful.

Instead when invoking the callbacks, I could do something like this.callbacks.beforeShown.call(popper) so then this will refer to the popper that is being shown.

It's easy too use css to set z-index or use js to add style to element,
but if tippy can support this option , it will be a better world.

Hello guys,
Thank you for your library, I like it so much and use it in every project with tooltips.

Now I've faced with the next issue:
If you set click triggering, so methods like beforeHidden are not fired if you click outside of the button. The version is v0.10.1, but it works at v0.5.0

How is it possible to fix?

You can see example here: https://jsfiddle.net/s6zcn7tx/

Thank you, looking forward to your answer

Missing a license file...