How can I render tags from Rich Text Editor in Prismic React Client?

Question

I am Working on a Prismic React Project, In which I need a functionality to show tooltip from rich text editor which is expected to show from the nested tags in Rich Text editor. A little bit help will be of lot of beneficial to us.

This is the functionality I want, but this is not specific how many times and where we need to show this thing in the whole project:

Answer 1

You can use a custom HTMLSerializer and a library for tooltips. Here’s an example where I used the react-tooltip(npm link)

The serializer will detect the text and wrap it in a paragraph tag; then, it will use the label as the data-for and id attributes and the tooltip content itself in the <ReactTooltip /> component.

import React from 'react'
import { Elements } from 'prismic-reactjs'
import ReactTooltip from 'react-tooltip'

export const htmlSerializer = function (type, children, element, content) {
  switch (type) {
    case Elements.label:
      const label = children.data.label ? children.data.label : ''
      console.log(content.join(''))
      return (
        <span>
          <p data-tip data-for={label}>
            {content.join('')}
          </p>
          <ReactTooltip id={label} place="top" effect="solid">
            {label}
          </ReactTooltip>
        </span>
      )

      // ... here goes the rest of your HTML serializer confguration
    default:
      return null
  }
}

After that, I passed it to my Rich Text field.

import { htmlSerializer } from '../utils/htmlSerializer'

<RichText render={document.data.text_field} htmlSerializer={htmlSerializer} />

Then, you'd just need to style it as you like. Here's a preview of how the component looks like: