materialui 工具提示右侧的 CSS 三角形

如何解决materialui 工具提示右侧的 CSS 三角形

问题是内容的高度在某些工具提示上发生了变化 this is how it is supposed to look 这是我试过的 when content is small when content is big

这是我所做的代码

const ToolTip = withStyles(() => ({
  tooltip: {
    display: "inline-block",backgroundColor: "#ffff",color: "#000",maxWidth: 280,fontWeight: 600,fontSize: 12,marginRight: 80,BoxShadow: "0px 60px 116px rgba(0,0.05),0px 23.9688px 48.462px rgba(0,0.0322996),0px 10.925px 25.9101px rgba(0,0.0260072),0px 4.59406px 14.525px rgba(0,0.0223691),0px 1.44481px 7.71412px rgba(0,0.018802),0px 0.13156px 3.21002px rgba(0,0.0130265)",textAlign: "justify",paddingRight: 30,borderRadius:8,position: "relative",minHeight:"160px",border: "1px solid rgba(0,0.12)",'&::before': {
      content: '""',display:"block",position: "absolute",top:0,right:-80,borderBottom: "85px solid transparent",borderTop:"85px solid transparent",borderLeft: "85px solid #ffff"
    
    }
  },}))(Tooltip);

解决方法

您可以使用 clip-path 而不是使用边框。这让您可以按百分比定义多边形，以便它会自动调整为 div 的尺寸。

这里有一个简单的片段来表达这个想法，背景是通过一个 before 伪元素添加的，该元素向右延伸超出了包含实际文本的 div 的宽度。

div {
  width: 200px;
  height: auto;
  min-height: 50px;
  padding: 10px;
  position: relative;
}
div::before {
  content: '';
  width: 130%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 5%;
  background-color: gray;
  clip-path: polygon(0 0,70% 0,100% 50%,70% 100%,0 100%);
  z-index: -1;  
}

 <div>Some text here</div>
 <div>Masses of text here Masses of text here Masses of text here Masses of text here Masses of text here Masses of text here Masses of text here</div>