Q:

apply css to Js strings-Js/CSS

I want to show tooltip on hover using data-tip attribute. HOwever since data-tip attribute just accepts strings. I couldnt use HTML and now I have settled with the following approach.
var title = "Hello World";
var online: "Last Online 2 mins ago".
    <div>
        <span data-tip={title +" \n " +online} data-tip-always>{title}</span>
    </div>

However now Im stuck at a point where how can I make {title} bold and {online} font-size to smaller than the {title} 
with this code:
const titles = `<span class="title">Hello</span>`;
const online = `<span class="online">You are online</span>` ;
<span data-tip={`${titles}\n${online}`} data-html="true" data-tip-always>{title}</span>

I get this:

initially I wanted to have this in the form of jsx so that I can add colors and fonts to it, however I couldn't find a way to use jsx/html inside a data-tip 
Is there any way I can apply css to strings?
Thanks

A:

React-tooltip's data-tip only accepts strings, but data-for can point to a <ReactTooltip> that can contain anything:

var title = 'Hello World';
var online = 'Last Online 2 mins ago';

ReactDOM.render(
<div>
  <span data-tip data-for="unique-tooltip-id" data-tip-always>{title}</span>
  <ReactTooltip id="unique-tooltip-id">
    <div className="tooltip-title">{title}</div>
    <div className="tooltip-online">{online}</div>
  </ReactTooltip>
</div>,
document.getElementById("react")
);
.tooltip-title {
  font-weight: bold;
}

.tooltip-online {
  font-size: 80%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/wwayne/react-tooltip@master/standalone/react-tooltip.min.js"></script>

<div id="react" style="position:absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);"></div>

the snippet only works in "full page" for some reason

