Tippyjs: Creating a Tippy instance without a DOM element

[maxkfranz]

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 : https://github.com/cytoscape/cytoscape.js-qtip/issues/28#issuecomment-300488586

[atomiks]

Hey, sorry for the late reply

That should be possible, I'll look into adding it for the next release =]

[atomiks]

Added this in v0.12.0, however I'm not 100% sure how you're using it. Feel free to let me know if you need changes/fixes etc and I'll change it up

The el that's tooltipped is reference in the Popper instance

EDIT: Ok forget about about using it in 0.12, it won't work right now.
I need to know how exactly you'll be using Tippy when you're passing in a Popper instance

[maxkfranz]

Basically, I'm looking to do something like this:

let ref = { clientWidth, clientHeight, getBoundingRect };  // see https://popper.js.org/popper-documentation.html#referenceObject

let popper = new Popper( ref, someContentDiv, options );

let tippy = new Tippy( popper );
let tippy2 = new Tippy( ref ); // or maybe this if it's easier

[atomiks]

I see -- so you only want Tippy for its events and what not? Your popper is custom-styled? The content div also won't have the transitions unless your popper has tippy-popper with an inner tippy-tooltip class

[maxkfranz]

I made a mistake in the code. My intention is to use typical Tippy tooltips but just not on dom nodes -- custom positioning is needed for Cytoscape.js elements as they're in a visualisation. I'm just on my phone right now, but I can correct/clarify the code example on Monday. Thanks

On May 12, 2017, at 23:02, atomiks [e-mail] wrote:

I see -- so you only want Tippy for its events and what not? Your popper is custom-styled? The content div also won't have the transitions unless your popper has tippy-popper with an inner tippy-tooltip class

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub, or mute the thread.

[maxkfranz]

@atomiks It should probably look more like this:

let ref = { clientWidth, clientHeight, getBoundingRect };  // see https://popper.js.org/popper-documentation.html#referenceObject

let tippy = new Tippy( ref );

[atomiks]

That makes more sense... will work on adding it for next release

[maxkfranz]

Great; thanks!

On May 15, 2017, at 20:01, atomiks [e-mail] wrote:

That makes more sense... will work on adding it for next release

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub, or mute the thread.

[atomiks]

I'm confused how you're setting the title if it's not on an actual element? Do you need to pass in the title as well? Also, I don't know how the virtual element can have event listeners on it either... 😕

[maxkfranz]

The content/title and events of the tooltip would be manual in this case. So basically

let ref = { clientWidth, clientHeight, getBoundingRect };  // see https://popper.js.org/popper-documentation.html#referenceObject

let contentDomEle = document.createElement('div'); // with some stuff in it (elided for brevity)

let tippy = new Tippy( ref, {
  html: contentDomEle
} );

The usecase I'm thinking of is creating an extension for Cytoscape.js. The extension would wrap the Tippy API and have its own options object for event handling, e.g.

node.on(extensionOptions.showEvents, evt => tippy.show());

[atomiks]

Hmmm alright... maybe you could try to modify the source yourself and send in a pull request?

[maxkfranz]

@josephst is working on the extensions, so hopefully he can make a PR while he's working on the Tippy extension.

[hmtinc]

102

I added an option to pass in a custom reference object that should allow users to manually override the position. Which should provide the ability to use tippy with plugins like cytoscape.js

Sample Usage

//Reference object allows for custom positioning
  var refObject = {
    getBoundingClientRect: function (data) {
      return {
        top:  5 + window.pageYOffset,
        left: 5 + window.pageXOffset,
        right: 5 + window.pageXOffset,
        bottom: 220 + window.pageYOffset,
        width: 1,
        height: 1,
    };
    },
    get clientWidth() {
      return 30;
    },
    get clientHeight() {
      return 30;
    },
  };

  var tip = tippy('#object', {}, refObject);

The element id which in the example is #object, refers to any DOM element and mainly just serves as a basis to create the popper element. The reference object actually provides the position .

[atomiks]

Released as 1.4.0

[dgroh]

That is why I'm exactly trying, but the tooltip keeps in the same position:

      const refObject = {
        getBoundingClientRect: function (data) {
          return {
            top:  5 + window.pageYOffset,
            left: 5 + window.pageXOffset,
            right: 5 + window.pageXOffset,
            bottom: 220 + window.pageYOffset,
            width: 100,
            height: 100,
        };
        },
        get clientWidth() {
          return 30;
        },
        get clientHeight() {
          return 30;
        },
      };

      tippy('.btn', {}, refObject);

[atomiks]

@DaJoTo you need to pass it as the first argument, tippy(refObject). The docs show that. Instead of a DOM element, you use a virtual element.

[DaJoTo]

@dgroh I imagine the above is for you

[atomiks]

Haha sorry. The name autocomplete must have done that.