Afflatus Afflatus - 6 months ago 49
Javascript Question

Formatted tooltip in Semantic UI

I want to add a formatted tooltip to one of my div but I can't get it right. this is what I have:

render() {
var scope = this,
getTooltip = function(product){
return ('<div>' +
'<div>Stock <div className="right floated">' + product.stock + '</div></div>' +
'</div>');
}
return (
<span data-html={getTooltip(product)}>{product.Stock()}</span>
)


what am I missing?

Answer

Have you added the jQuery to initiate the tooltip as your component is mounted?

componentDidMount() {
  $(yourSpanClassnameOrId)
     .popup({
       position : 'left',
       inline: true
     })
 }