Question

Using this the samples located here I’ve put this together:

The code is located on jsFiddle.net. If everything works when you run the sample, you should see a button with a question mark and clicking on that button the and the bubble should pop out.

The two things I can’t seem to figure out right now is getting a 1px border on the triangle and vertically centering the triangle on the left edge.

Answer 1

For the line thickness of the triangle, change the top, left and border-width values for the inner triangle so it’s just 1px smaller than the larger triangle.

.triangle-border.left:after {
    top: 11px;
    left: -29px;
    border-width: 14px 29px 14px 0;
}