如何在每个 div 中居中工具提示 [英] how can centering tooltip in each div

问题描述

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

如何将此工具提示置于每个 div 的中心并旋转它?http://jsfiddle.net/5vv8hfLo/3/

.div1 {背景:黄色；宽度:200px；高度:100px；显示:内联块；边距顶部:100px；}.div2 {背景:红色；宽度:260px；高度:100px；显示:内联块；边距顶部:100px；}.div3 {背景:蓝色；宽度:160px；高度:100px；显示:内联块；边距顶部:100px；}.div4 {背景:粉色；宽度:60px；高度:100px；显示:内联块；边距顶部:100px；}.工具提示{显示:内联；位置:相对；z-索引:999；}/* 间隙填充 */.tooltip::after {内容: '';位置:绝对；宽度:100%；底部:100%；左:50%；指针事件:无；-webkit-transform: translateX(-50%);变换:translateX(-50%);}.tooltip:hover::after {指针事件:自动；}/* 工具提示 */.工具提示内容{位置:绝对；z-索引:9999；宽度:120px；底部:100px；左:165px；字体大小:20px；行高:1.4；文本对齐:居中；字体粗细:400；颜色:黑色;背景:透明；不透明度:0；边距:0 0 20px -120px；光标:默认；指针事件:无；-webkit-font-smoothing:抗锯齿；-webkit-transition: 不透明度 0.3s 0.3s;过渡:不透明度 0.3s 0.3s；}.tooltip:hover .tooltip-content {不透明度:1；指针事件:自动；-webkit-transition-delay: 0s;转换延迟:0s；}.tooltip-内容跨度{显示:块；}.tooltip-text {边框底部:10px 实心 #fcd803;溢出:隐藏；-webkit-transform: scale3d(0,1,1);变换:scale3d(0,1,1);-webkit-transition: -webkit-transform 0.3s 0.3s;过渡:变换0.3s 0.3s；}.tooltip:hover .tooltip-text {-webkit-transition-delay: 0s;转换延迟:0s；-webkit-transform: scale3d(1,1,1);变换:scale3d(1,1,1);}.tooltip-内{字体大小:10px；背景:RGBA(255,255,255,0.95)；填充:10px；-webkit-transform: translate3d(0,100%,0);变换:translate3d(0,100%,0);webkit-transition:-webkit-transform 0.3s；过渡:变换0.3s；}.tooltip:hover .tooltip-inner {-webkit-transition-delay: 0.3s;转换延迟:0.3s；-webkit-transform: translate3d(0,0,0);变换:translate3d(0,0,0);}/* 箭 */.tooltip-content::after {内容: '';底部:-20px；左:50%；边框:实心透明；高度:0；宽度:0；位置:绝对；指针事件:无；边框颜色:透明；边框顶部颜色:#fcd803；边框宽度:10px；左边距:-10px；}

<ul><span class="工具提示"><div class="div1"></div><span class="tooltip-content"><span class="tooltip-text"><span class="tooltip-inner">测试1</span></span></span></span><span class="工具提示"><div class="div2"></div><span class="tooltip-content"><span class="tooltip-text"><span class="tooltip-inner">测试2</span></span></span></span><span class="工具提示"><div class="div3"></div><span class="tooltip-content"><span class="tooltip-text"><span class="tooltip-inner">测试3</span></span></span></span><span class="工具提示"><div class="div4"></div><span class="tooltip-content"><span class="tooltip-text"><span class="tooltip-inner">测试4</span></span></span></span>

解决方案

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

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

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

left: 0;右:0；边距:0 自动 20px；

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

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

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

there is 4 div with different width! try to put tooltip in center of each div! but i can't do this! also i want put this tooltip in bottom of div and rotate it

how can put this tooltip in center each div and rotate it ? 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>

解决方案

Try this (I've updated your jsfiddle):

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

You need to make some css changes in .tooltip-content:

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

Instead of defining a fixed left property you need to set left and right to zero, and then set the left and right margin to auto.

For the last block this doesn't work because the width of the tooltip is longer than the block itself.

I'm not sure what you meant by putting it to the bottom of the div and rotating it...

这篇关于如何在每个 div 中居中工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！