如何将文本左对齐。在反应工具提示中？

Posted 2023-03-05

【中文标题】如何将文本左对齐。在反应工具提示中？

【英文标题】：How to align the text to the left. in react-tooltip?

【发布时间】：2021-12-23 17:41:36

【问题描述】：

我正在使用 react-tooltip 来显​​示多行工具提示， 但问题是文本默认居中， 如何将文本左对齐

<ReactTooltip/>
<img  
    data-effect="solid" 
    data-place="right" 
    data-multiline=true
    data-tip="  Tooltip text line one <br/>
                Tooltip text line two <br/>
                Tooltip text longer than usual  line three<br/>
                Tooltip text line four <br/>
                Tooltip text line five <br/>
                Tooltip text last line" 
    style=marginTop : "10px", marginLeft : "6px" 
    src=questionCircleImg max- max- />

【参考方案1】：

使用 data-class 属性为您的工具提示提供自定义类

<ReactTooltip/>
<img

data-class="my-tooltip"
data-effect="solid" 
data-place="right" 
data-multiline=true
data-tip="  Tooltip text line one <br/>
            Tooltip text line two <br/>
            Tooltip text longer than usual  line three<br/>
            Tooltip text line four <br/>
            Tooltip text line five <br/>
            Tooltip text last line" 
style=marginTop : "10px", marginLeft : "6px" 
src=questionCircleImg max- max- />

然后在 css 中覆盖工具提示样式

.my-tooltip .multi-line 
   text-align: left !important;

这是工作示例：https://codesandbox.io/s/react-tooltip-example-3-11-6-forked-z2lz5?file=/src/styles.css:0-59