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

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
	});

[anthony0579]

All working great - thanks!

[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)