Why Tooltip from primereact library doesn't work to tag
?

Question

I want to add a tooltip to JSON formatted field, but it doesn't work. I have the following code:


const displayDeletedDataInJSON = (column: ITableColumn) => {
  return (rowData: any): JSX.Element => {
    const formatedJson = formatObjectInJson(
      column.field,
      rowData[`${column.field}`]
    );
    return rowData[`${column.field}`] ? (
      <React.Fragment>
        <DeletedDataTemplate>
          {" "}
          <pre id={`deleted-data-${column.header}`}>
            {JSON.stringify(formatedJson, null, 2).replace(/["[,\]]/g, "")}
          </pre>
        </DeletedDataTemplate>
        <Tooltip
            target={`deleted-data-${column.header}`}
            content={rowData[$`{column.field}`]}
            //showDelay={1000}
            position={"left"}
          />
      </React.Fragment>
    ) : (
      <span></span>
    );
  };
};

rowData and column are objects with different properties. The property column.header is always different for the different column objects.

DeletedDataTemplate is a custom css.

I tried changing the ids, their positions (for example I put the id to the DeletedDataTemplate). I used a dummy content string = "fdsfsda", to check if the problem comes from the content, but it didnt work.

I want to make this tooltip working.

I will be very grateful, if you give me some ideas and could help me out.

score 0 · Answer 1 · answered Mar 24 '22 at 18:03

This should fix your issue by wrapping it in a DIV and assigning the DIV the ID. The PRE tag most likely doesn't receive mouseenter and mouseleave events the tooltips need because its not an element that has dimensions.

<div id={`deleted-data-${column.header}`}> 
  <pre>
  {JSON.stringify(formatedJson, null, 2).replace(/["[,\]]/g, "")}
  </pre>
</div>

Why Tooltip from primereact library doesn't work to tag ?

1 Answers1

Why Tooltip from primereact library doesn't work to tag
?