时间戳

首页 > 解决方案 > 无法为工具提示制作 css 三角形

javascript - 无法为工具提示制作 css 三角形

问题描述

我无法制作类似于此的工具提示箭头 在此处输入图像描述

删除arrowTransform:"scale(2)"也无济于事。我在 css 中缺少的东西。这是笔

标签： javascriptjqueryhtmlcsstippyjs

解决方案

.arrow_box {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.arrow_box .arrow_boxtext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.arrow_box .arrow_boxtext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.arrow_box:hover .arrow_boxtext {
    visibility: visible;
    opacity: 1;
}
<!DOCTYPE html>
<html>

<body style="text-align:center;">

<p>Move the mouse over the text below:</p>

<div class="arrow_box">Hover over me
  <span class="arrow_boxtext">your text is here</span>
</div>

</body>
</html>

DEMO看其他positions。

.arrow_box {
	position: relative;
	background: #ffffff;
	border: 1px solid #bebebe;
  display:inline-block;
  padding:5px;
}
.arrow_box:after, .arrow_box:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(255, 255, 255, 0);
	border-top-color: #ffffff;
	border-width: 7px;
	margin-left: -7px;
}
.arrow_box:before {
	border-color: rgba(190, 190, 190, 0);
	border-top-color: #bebebe;
	border-width: 8px;
	margin-left: -8px;
}
<html>
<body>
<div class="arrow_box">
  <span>your text is here</span>
</div>
</body>
<html>

推荐阅读