Tippyjs: How to use tippyjs with custom attribute (instead of title)

[cohenu]

Hey Guys, :-)

I'm trying to use tippyjs with attribute other than title, something like:
selector: [rel-tooltip]
tooltip content: [tooltip]

This is my current setup:

    tippy('[title]', {
        arrow: true,
        animation: 'fade',
        theme: 'general',
        delay: [0, 0],
        duration: [0, 0],
        maxWidth: '210px',
        dynamicTitle: true
    });

I'm using the library on chromium app with a lot of dynamic content and pages sometimes between destroy and initialization of the library the default behavior of the title attribute come up and I'm trying to get rid of it.

I tried this with no luck:

    tippy('[rel-tooltip]', {
        arrow: true,
        animation: 'fade',
        theme: 'general',
        delay: [0, 0],
        duration: [0, 0],
        maxWidth: '210px',
                content: '[tooltip]'
        dynamicTitle: true
    });

[atomiks]

That looks like v2. Have you tried using v3?

[cohenu]

Yeah you are right, Thanks for the quick response :)

[anthony0579]

Is it possible to use the 'title' attribute for the tippy content rather than 'data-tippy-content'?

Looking at the 'content' option, only string or element is allowed, but can we maybe do something like this:
tippy('button', { content: this.getAttribute('title') })

Thanks

[KubaJastrz]

If you used title, then you'd have both tippy and default browser tooltip.

[atomiks]

It's possible using a function:

tippy('button', {
  content(reference) {
    const title = reference.getAttribute('title')
    reference.removeAttribute('title')
    return title
  }
})

Edit: I think the 'All Options' table might be missing this type. Also TS definitions are missing this.. the docs do show this at the end of the HTML Content section though.

Edit 2: 4.0.1 fixes the above. It will now work 😄

[atomiks]

If you want this as default behavior, feel free to "enhance" the tippy function.

function withTitleAttributeContent(tippy) {
  return (targets, options = {}) => tippy(targets, {
    ...options,
    content(reference) {
      if (options.content) {
        return options.content
      }
      const title = reference.getAttribute('title')
      reference.removeAttribute('title')
      return title
    }
  })
}

window.tippy = withTitleAttributeContent(tippy)

[anthony0579]

Thanks @atomiks
Had been trying the content function but it wasn't working and just seen your Edit 2 fix - I'll give that a go - many thanks!

[atomiks]

I will add this to the FAQ page

[anthony0579]

All working great - thanks!