侃侃爾雅
2021-09-17 16:33:07
我想在懸停時(shí)顯示工具提示,該工具提示具有 html jsx 內(nèi)容。我曾經(jīng)ReactDOMServer.renderToStaticMarkup將 jsx 轉(zhuǎn)換為字符串,但是工具提示的最終結(jié)果是:<div>ABC</div> <div>ABC description</div> <div>ABC refreshed 1 min ago</div>我希望工具提示顯示 html 中的內(nèi)容而不包含標(biāo)簽。我怎樣才能做到這一點(diǎn)?jsx:render() { let tooltip = ( <div>ABC</div> <div>ABC description</div> <div>ABC refreshed 1 min ago</div>) return ( <div><span data-tip={ReactDOMServer.renderToStaticMarkup(tooltip)}>ABC info</span></div> )}
3 回答

收到一只叮咚
TA貢獻(xiàn)1821條經(jīng)驗(yàn) 獲得超5個(gè)贊
將它放在一個(gè)普通的 html 元素中,并在另一個(gè)元素懸停時(shí)使用 css 選擇器來顯示它。下面是一個(gè)例子:
.element {
position: relative;
}
.tooltip {
display: none;
position: absolute;
top: 100%;
left: 0;
padding: 3px;
border: 1px solid black;
}
.element:hover .tooltip {
display: block;
}
<span class="element">
Hover me
<span class="tooltip">I appear on hover!</span>
</span>
這很簡(jiǎn)單,在 React 中不需要任何 js 邏輯。

一只甜甜圈
TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超5個(gè)贊
嘗試使用這個(gè)
<div data-toggle="tooltip" data-placement="top">Your Content</div>
添加回答
舉報(bào)
0/150
提交
取消