How to get actual (not original) height of a CSS-rotated element

Question

I need to obtain actual height of several different elements (for the sake of precise custom tooltip positioning), and some of these elements (not all) are rotated. $(elem).outerHeight() returns the original height, instead of the actual displayed height.

Here's the fiddle with a very simple example: http://jsfiddle.net/NPC42/nhJHE/

I see a possible solution in this answer: https://stackoverflow.com/a/8446228/253974, but am still hoping there is a simpler way.

Answer 1

Dusting off my high school geometry and my formidable graphics skills, I put this diagram together. If you have variables width, height, and rotation in javascript, you could express the height this way:

var rotated_height = width * Math.sin(rotation) + height * Math.cos(rotation);

Answer 2

If you're only going to be using rotations of 45 degrees and the width and height are always equal, you can calculate the actual rotated height by using the relatively simple mathematical Hypotenuse formula:

which states that the square of the length of the hypotenuse equals the sum of the squares of the lengths of the other two sides.

In this case, the longest side would be the diagonal from corner to opposing corner. This will roughly translate into jQuery like so:

Math.sqrt(Math.pow($('#diamond').height(), 2) + Math.pow($('#diamond').width(), 2))

See the updated jsFiddle.