在css中设置箭头,使用CSS在工具提示中添加箭头

使用CSS，您可以使用：after在工具提示中添加一个小箭头。这样，还可以使用content属性。

您可以尝试运行以下代码以在工具提示中添加箭头：

示例

html>

.mytooltip .mytext {

visibility: hidden;

width: 140px;

background-color: blue;

color: #fff;

z-index: 1;

bottom: 100%;

left: 60%;

margin-left: -90px;

text-align: center;

border-radius: 6px;

padding: 5px 0;

position: absolute;

}

.mytooltip {

position: relative;

display: inline-block;

margin-top: 50px;

}

.mytooltip .mytext:after {

content: "";

position: absolute;

top: 100%;

left: 50%;

margin-left: -10px;

border-width: 7px;

border-style: solid;

border-color: blue transparent transparent transparent;

}

.mytooltip:hover .mytext {

visibility: visible;

}

Keep mouse cursor over me

 My Tooltip text