Data attribute props

[aaronstezycki]

Hi, I'm sorry if this question has been answered elsewhere, can't find any answers atm to it.

Is there a way to pass data attributes as props to tippy without having to initiate multiple instances? I'm wanting to pass data attributes to set an explicit placement, but can't see whether it's possible or not. I know there are certain props that can be passed this way.

I tried this, which is the example given in the docs for the content prop, but doesn't seem to work.

tippy('[data-tooltip]', {
    // Content
    content(reference) {
        const title = reference.getAttribute('data-tooltip');
        return title;
    },
    // Placement
    placement(position) {
        const position = this.getAttribute('data-tooltip-position');
        return position;
    },
});

Also this would super handy for things like maxWidth too, allowing this to be used on the fly in an arbitrary setting.

Right now it seems like to be able to set these you have to initiate tippy like so:

tippy('[data-tooltip-placement="top-start"]', {
    placement: 'top-start'
}
tippy('[data-tooltip-placement="top-end"]', {
    placement: 'top-end'
}

Thanks for any advice in advance :)

[atomiks]

What's wrong with this?

<div data-tooltip data-tippy-placement="top-start"><div>
<div data-tooltip data-tippy-placement="top-end"><div>

tippy('[data-tooltip]');

Each one will use its own placement as specified by the attribute.

[aaronstezycki]

Hi, thanks for your answer!

I think (if I remember correctly) I saw the above example somewhere in the documentation, and I'm guessing my goal was to assign tippy to custom data attributes instead of using the ones provided out of the box.

Is there any way to change that? I.e. change the prefix used for setting data attributes. I guess it keeps the code consistent, developer friendly and readable. Not everyone will understand the tippy expression if they haven't looked at the includes. Not a biggie if it can't be done and is mostly OCD request. :)