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

我想使用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应用于字符串吗？

谢谢

最佳答案

React-tooltip的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>

由于某些原因，该片段仅在“整页”中有效

关于javascript - 将CSS应用于Js字符串-Js/CSS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57617202/

Tip

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