如何将文本左对齐。在react-tooltip中？

Question

我使用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-width="50" max-height="50" />

​

​

Answer 1

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

<ReactTooltip/>
<img
alt=""
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-width="50" max-height="50" />

然后在css overide工具提示样式中

.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