如何在react-tooltip中将多行提示框的文本设置为左对齐？

解决方案 #

react-tooltip开启多行展示后默认文本居中，可通过自定义样式修改为左对齐，操作如下：

• 给ReactTooltip组件添加自定义类名，避免全局样式污染：

<ReactTooltip className="custom-left-tooltip" />

• 在样式文件中添加对应规则：

.custom-left-tooltip {
  text-align: left;
  /* 若样式被默认规则覆盖，可添加!important提升优先级 */
  /* text-align: left !important; */
  /* 可选：调整内边距优化左对齐后的视觉表现 */
  padding: 8px 12px;
}

额外优化建议 #

你当前data-tip属性内的每行文本前有大量多余缩进空格，左对齐生效后这些空格会保留在每行开头，建议清理掉多余缩进，修改后的标签示例如下：

<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" />

原效果参考 #

内容的提问来源于stack exchange，提问作者rahul Kushwaha