javascript - 将css应用于Js字符串-Js/CSS

Question

我想使用 data-tip 属性在悬停时显示工具提示。然而，由于 data-tip 属性只接受字符串。我不能使用 HTML，现在我已经解决了以下方法。

var title = "Hello World";
var online: "Last Online 2 mins ago".
    <div>
        <span data-tip={title +" \n " +online} data-tip-always>{title}</span>
    </div>

但是现在我陷入了一个问题，我怎样才能使 {title} 变为粗体并将 {online} 字体大小设置为小于 {title}

使用此代码:

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>

我明白了:

最初我想以 jsx 的形式使用它，以便我可以为其添加颜色和字体，但是我找不到在 data-tip 中使用 jsx/html 的方法 有什么方法可以将 css 应用于字符串？

谢谢

Answer 1

React 工具提示的 data-tip只接受字符串，但是 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>

^{出于某种原因，该代码段仅适用于“整页”}