atomiks / tippyjs

Tooltip, popover, dropdown, and menu library
https://atomiks.github.io/tippyjs/
MIT License
11.92k stars 520 forks source link

Use Tippyjs as notifier #919

Closed fdiluzio closed 3 years ago

fdiluzio commented 3 years ago

I'm using tippy to notify the user that a 'copy to clipboard' has occurred. I haven't discovered a cool way of doing this on an 'apply as needed' basis. What I have done is to apply tippy to the element and call click on it, to show the message without an arrow. Do you have an alternate suggestion?

        const copy = widget.dashBoard.tippy(target, {
            trigger: 'click',
            content: widget.data.i18n.copied,
            arrow: false,
            onShow(instance) {
              setTimeout(e => {
                copy.hide();
              }, 1500);
            }
          });
          target.click();
atomiks commented 3 years ago

'apply as needed' basis

It sounds like you want to use trigger: 'manual' and call .show() programmatically whenever needed. https://atomiks.github.io/tippyjs/v6/methods/

fdiluzio commented 3 years ago

Yup. I hadn't discovered the 'manual' prop value. Thanks!

fdiluzio commented 3 years ago

Solution worked.