i get no tooltip for elements in array

[Ginso]

Hello, I'm trying to create tooltips for an array of elements, but i don't get any. What am i doing wrong?

<div id="messages" className="filler">
	{ 
		messages && messages.map(m => (
				<span key={m.id} className={m.sent == 1 ? "sent" : "received"}>
					<xmp data-for="message" data-tip={formatDate(m.created, true)} data-iscapture="true">{m.content}</xmp>
				</span>
			))
	}
</div>
<ReactTooltip
	id="message"
	place="top"
	effect="solid"
	type="dark"
	multiline={true}
/>

[Aryaman73]

I'm not entirely sure what you're trying to do, but I think you need to add something to the RealTooltip tag, it can't be self closing:

Something like this:

<ReactTooltip
	id="message"
	place="top"
	effect="solid"
	type="dark"
	multiline={true}
> 
    <p> test tooltip </p>
</ReactTooltip>

[indranil]

@Ginso and anyone facing this problem:

If your data, ie: messages is dynamically loaded from an external request, react-tooltip will not know about them, so you need to rebuild it.

Using hooks, for your specific case:

import ReactTooltip from "react-tooltip";

useEffect(() => {
    ReactTooltip.rebuild();
  }, [messages]);

This will allow react-tooltip to pick up the new elements