antd tooltip title 渲染富文本
时间: 2023-07-21 08:04:01 浏览: 68
在 Ant Design 中,Tooltip 组件的 title 属性是可以接受富文本的。您可以使用 React 的 dangerouslySetInnerHTML 属性将富文本内容传递给 Tooltip 的 title 属性。
下面是一个示例代码,演示如何在 Tooltip 中渲染富文本:
```javascript
import React from 'react';
import { Tooltip } from 'antd';
// 富文本内容
const richText = '<p>This is <strong>bold</strong> text and this is <em>italic</em> text.</p>';
function App() {
return (
<Tooltip title={<div dangerouslySetInnerHTML={{ __html: richText }} />}>
<span>Hover me</span>
</Tooltip>
);
}
export default App;
```
在上面的代码中,我们使用了 `dangerouslySetInnerHTML` 属性来设置富文本内容。`dangerouslySetInnerHTML` 属性接受一个对象,其中的 `__html` 属性的值即为要渲染的富文本内容。
请注意,使用 `dangerouslySetInnerHTML` 需要小心,因为它可以导致跨站脚本攻击(XSS)的安全风险。确保您信任传递给 `dangerouslySetInnerHTML` 的内容,或者使用其他方法来确保安全性。
希望对您有所帮助!如果还有其他问题,请随时提问。
相关推荐
![.zip](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)