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 to

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