我认为粗略绘图是最好的。这就是我所拥有的。
这是一个菜单（A B C D是图标）。我想要一个“工具提示”出现在鼠标上方的菜单图标上，居中于它上方。我成功地做到了这一点。问题是我还希望工具提示包含在父容器中，下面的“图纸”中的xxxxxx矩形。
这就是我想要发生的事情，基本上是：
鼠标悬停在D：
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
x _______________ x
x / \ x
x | Tooltip for D | x
x \______ ______/ x
x A B C |D| E F G x
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
鼠标悬停在G：
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
x _______________ x
x / \x
x | Tooltip for G |x
x \__________ __/x
x A B C D E F |G| x
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
所以我只想让工具提示仅在图标上方居中，同时保留在父框中。如果不可能完美地居中它，它必须与父容器允许的中心一样多。
我知道这可以在JavaScript中完成，但这似乎不是一个有趣或微不足道的任务，所以我想先问一下，如果有任何尝试过的解决方案，最好是在CSS中，最少量的JavaScript。
PS：我通常不使用jQuery，所以非常喜欢非jQuery解决方案。