how can centering tooltip in each 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>

回答1:

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...

来源：https://stackoverflow.com/questions/27145732/how-can-centering-tooltip-in-each-div