私は自分のWebページ用の小さなツールチップコードを作ろうとしています。私は次の1時間かそれ以上の時間に欲求不満になってきました。なぜならこれはちょうど働きたくないからです。ツールチップがその親要素の外側に表示されるようにするには、ツールチップのすべての空白が改行に変わります。要素が親の外側にあるとき、CSSの空白は改行に変わります。
/*css*/
*[tooltip=left]:after{
content: attr(data-tooltip);
padding: 10px;
border-radius: 5px;
background: white;
position: absolute;
display: block;
max-width: 200px;
min-height: 15px;
word-spacing:normal;
word-break: keep-all;
top: 50%;
left: calc(100% + 20px);
transform: translateY(-50%);
z-index: 999;
}
*[tooltip=left]:hover:before {
content: "";
position: absolute;
top: 50%;
display: inline;
white-space: pre-line;
transform: translateY(-50%);
margin-left: calc(100% + 10px);
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent #ffffff transparent
}
/*The actual text:
Saves the rendered image as a png file. Notice that the resolution is the same as the document window.*/