Tippyjs: Tooltip With image issue.

[varunsridharan]

I am using TippyJS in my project but i am facing an issue with tooltip + Image

Output I am getting

http://s.svarun.in/xn

---

Output Should Be

---

JS Code

let $arg = this.arg( $fid + 'tooltip' );

            $arg[ 'performance' ] = false;
            if ( $arg[ 'image' ] !== false ) {
                $arg.html           = '#wponiontooltipimagetippy';
                $arg.updateDuration = 2000;
                $arg.followCursor   = false;
                $arg.livePlacement  = true;
                $arg.inertia        = true;

                $arg.onShow             = function () {
                    const content = this.querySelector( '.tippy-content' );
                    if ( $tip.loading ) return;

                    $tip.loading = true;

                    fetch( $arg[ 'image' ] ).then( resp => resp.blob() ).then( blob => {
                        const url         = URL.createObjectURL( blob );
                        content.innerHTML = `<img src="${url}">`;
                        $tip.loading      = false;
                    } ).catch( e => {
                        content.innerHTML = 'Loading failed';
                        $tip.loading      = false;
                    } );
                };
                $arg.onHidden           = function () {
                    const content     = this.querySelector( ".tippy-content" );
                    content.innerHTML = '';
                };
                $arg[ 'popperOptions' ] = {
                    modifiers: {
                        preventOverflow: {
                            enabled: false
                        },
                        hide: {
                            enabled: false
                        }
                    }
                };
            }
            $tip = tippy( this.elem[ 0 ], $arg );

[atomiks]

Can you make this on CodePen?

[varunsridharan]

Here you go https://codepen.io/anon/pen/RJEgez

[atomiks]

Okay, I think the issue is that the MutationObserver detects the innerHTML content change, but the image doesn't begin loading yet and doesn't affect the layout of the tooltip, so its position is updated too soon.

You might need to detect when the image's dimensions become known by the browser, and then call tip.popperInstance.update() to manually update the tooltip's position.

Or set a width or height attribute on the image so that the dimensions are known.

[varunsridharan]

@atomiks i am not that good @ JS do you mind providing me an example of tip.popperInstance.update() ?

i can't set width or height.

[atomiks]

Sure, here you go https://codepen.io/anon/pen/YvdEjg?editors=0010

I made a custom function onImageDimensionsKnown that invokes the callback once the naturalWidth property is some truthy value (i.e. 1px or more) by testing it every 5ms. I'm not sure what a "safe" value is here such that there are no 1 frame glitches where the popper is incorrectly positioned though.

The key code is here:

content.innerHTML = `<img src="${url}">`
onImageDimensionsKnown(content.querySelector('img'), instance.popperInstance.update)

This seems to work. When the tooltip is flipped on show it does transition undesirably, but it's not incorrectly placed.

Notes:

• onShow get passed the relevant tippy instance as an argument onShow(instance),
• popperInstance is a property of tippy instances.
• createPopperInstanceOnInit: true ensures the popper instance is available for the first show because it is lazily created for increased performance by default.

[varunsridharan]

This worked. 👍 Thanks a lot 😄