html - 如何在每个 div 中居中工具提示

Question

有4个不同宽度的div!尝试将工具提示放在每个 div 的中心!但我不能这样做!我也想把这个工具提示放在 div 的底部并旋转它

如何将这个工具提示放在每个 div 的中心并旋转它？ http://jsfiddle.net/5vv8hfLo/3/

.div1 {
	background: yellow;
	width: 200px;
	height: 100px;
	display: inline-block;
	margin-top: 100px;
}

.div2 {
	background: red;
	width: 260px;
	height: 100px;
	display: inline-block;
	margin-top: 100px;
}

.div3 {
	background: blue;
	width: 160px;
	height: 100px;
	display: inline-block;
	margin-top: 100px;
}

.div4 {
	background: pink;
	width: 60px;
	height: 100px;
	display: inline-block;
	margin-top: 100px;
}


	
.tooltip {
	display: inline;
	position: relative;
	z-index: 999;
}

/* Gap filler */
.tooltip::after {
	content: '';
	position: absolute;
	width: 100%;
	bottom: 100%;
	left: 50%;
	pointer-events: none;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.tooltip:hover::after {
	pointer-events: auto;
}

/* Tooltip */

.tooltip-content {
	position: absolute;
	z-index: 9999;
	width: 120px;
	bottom: 100px;
	left: 165px;
	font-size: 20px;
	line-height: 1.4;
	text-align: center;
	font-weight: 400;
	color: black;
	background: transparent;
	opacity: 0;
	margin: 0 0 20px -120px;
	cursor: default;
	pointer-events: none;
	-webkit-font-smoothing: antialiased;
	-webkit-transition: opacity 0.3s 0.3s;
	transition: opacity 0.3s 0.3s;
}

.tooltip:hover .tooltip-content {
	opacity: 1;
	pointer-events: auto;
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

.tooltip-content span {
	display: block;
}

.tooltip-text {
	border-bottom: 10px solid #fcd803;
	overflow: hidden;
	-webkit-transform: scale3d(0,1,1);
	transform: scale3d(0,1,1);
	-webkit-transition: -webkit-transform 0.3s 0.3s;
	transition: transform 0.3s 0.3s;
}

.tooltip:hover .tooltip-text {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

.tooltip-inner {
	font-size: 10px;
	background: rgba(255,255,255,0.95);
	padding: 10px;
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);
	webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.tooltip:hover .tooltip-inner {
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

/* Arrow */

.tooltip-content::after {
	content: '';
	bottom: -20px;
	left: 50%;
	border: solid transparent;
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: transparent;
	border-top-color: #fcd803;
	border-width: 10px;
	margin-left: -10px;
}

<div>
	<ul>
		<span class="tooltip">
			<div class="div1"></div>
			<span class="tooltip-content">
				<span class="tooltip-text">
					<span class="tooltip-inner">
						test1
					</span>
				</span>
			</span>
		</span>
		<span class="tooltip">
			<div class="div2"></div>
			<span class="tooltip-content">
				<span class="tooltip-text">
					<span class="tooltip-inner">
						test2
					</span>
				</span>
			</span>
		</span>
		<span class="tooltip">
			<div class="div3"></div>
			<span class="tooltip-content">
				<span class="tooltip-text">
					<span class="tooltip-inner">
						test3
					</span>
				</span>
			</span>
		</span>
		<span class="tooltip">
			<div class="div4"></div>
			<span class="tooltip-content">
				<span class="tooltip-text">
					<span class="tooltip-inner">
						test4
					</span>
				</span>
			</span>
		</span>
	</ul>
</div>

Answer 1

试试这个(我已经更新了你的 jsfiddle):

http://jsfiddle.net/5vv8hfLo/5/

您需要在 .tooltip-content 中进行一些 css 更改:

left: 0;
right: 0;
margin: 0 auto 20px;

您需要将 left 和 right 设置为零，然后将左右边距设置为 auto，而不是定义固定的 left 属性。

对于最后一个 block ，这不起作用，因为工具提示的宽度比 block 本身长。

我不确定你把它放在 div 的底部并旋转它是什么意思......