@tippy.js/react allowHTML

Question

In react Tippy I cannot make work some properties of tippy. I want allowHTML in Tippy.

Here is my code:

    <Tippy
        // content={<div dangerouslySetInnerHTML={{__html: tooltip}} />}
        content={tooltip}
        delay={100}
        hideOnClick={false}
        allowHTML={true}
        
    >
        ...some other code here
    </Tippy>

The commented code does what I would like to see. If the content contains html then it renders the content properly. I have found the solution here: https://github.com/atomiks/tippyjs-react/issues/94#issuecomment-498100958

However, I would like to use the own properties of tippy. allowHTML does not work while delay and hideOnClick work.

It seems like the properties with "R" (see attached picture) do not seem to work and I cannot figure out how to use them in react and could not find in documentation either.

Tippy properties V6.x

Source: https://atomiks.github.io/tippyjs/v6/all-props/

Answer 1

My main issue with dangerouslySetInnerHTML was XSS vulnerability. That's why I wanted to use own property of tippyjs, the innerHTML. Because I though it handles XSS vulnerability but after reading the documentation again, more carefully, I realized it requires sanitizing data as well.

So I just go with dangerouslySetInnerHTML and sanitize my data before using it. Here is my code:

import Tippy from '@tippy.js/react';
import dompurify from 'dompurify';
import React from 'react';

const PropertyLabel = ({ label, tooltip }) => {
    const sanitizedTooltip = dompurify.sanitize(tooltip);
    return (
        <Tippy
            content={<div dangerouslySetInnerHTML={{ __html: sanitizedTooltip }} />}
            delay={100}
        >
        ...some other code here
        </Tippy>
    );
};

Here are the sources that I used to implement dompurify:

• https://pragmaticwebsecurity.com/articles/spasecurity/react-xss-part2.html

• https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml:~:text=class%20attribute%20instead.-,dangerouslySetInnerHTML,-dangerouslySetInnerHTML%20is%20React%E2%80%99s

• https://www.npmjs.com/package/dompurify

I know it does not solve the problem of using properties of Tippy marked with an "R" in React, but this single solution works instead of "allowHTML" property.