Skip to content

Commit

Permalink
Add 'Can I use the title attribute?' section (atomiks#411)
Browse files Browse the repository at this point in the history
  • Loading branch information
atomiks committed Feb 10, 2019
1 parent ee138ac commit b73c4e8
Showing 1 changed file with 43 additions and 0 deletions.
43 changes: 43 additions & 0 deletions website/src/pages/faq.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -53,3 +53,46 @@ bottom of the page, like so:
</body>
</html>
```

### Can I use the `title` attribute?

Yes. The `content` option can be a function that receives the reference element
as an argument and returns a string or element.

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

The `title` attribute should be removed once you have its content so the
browser's default tooltip isn't displayed along with the tippy.

With the beauty of higher-order functions, you can "enhance" the base tippy
function with new functionality. To add this behavior by default, you can do
something like this at the very top of your scripts before any calls to
`tippy()`:

```js
function withTitleAttributeContent(tippy) {
return (targets, options = {}) => {
return 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)
```

0 comments on commit b73c4e8

Please sign in to comment.