Smart Tooltip Positioning

by Ronny

HTML

<script src="https://raw.github.com/LeaVerou/prefixfree/master/prefixfree.min.js"></script>
<div id="TopicTextInner"><!-- RENDERED, REPLACE LINKS -->
<b>Film Performances:</b><a href="/topics/inglourious_basterds/" title="Tag:Inglourious Basterds" class="TopicTooltipTrigger">Inglourious Basterds</a>, <a href="/topics/a_river_runs_through_it/" title="Tag:A River Runs Through It" class="TopicTooltipTrigger">A River Runs Through It</a>, <a href="/topics/babel/" title="Tag:Babel" class="TopicTooltipTrigger">Babel</a>, <a href="/topics/cool_world/" title="Tag:Cool World" class="TopicTooltipTrigger">Cool World</a>, <a href="/topics/cutting_class/" title="Tag:Cutting Class" class="TopicTooltipTrigger">Cutting Class</a>, <a href="/topics/fight_club/" title="Tag:Fight Club" class="TopicTooltipTrigger">Fight Club</a>, <a href="/topics/meet_joe_black/" title="Tag:Meet Joe Black" class="TopicTooltipTrigger">Meet Joe Black</a>, <a href="/topics/mr._&amp;_mrs._smith/" title="Tag:Mr. &amp; Mrs. Smith" class="TopicTooltipTrigger">Mr. &amp; Mrs. Smith</a>, <a href="/topics/ocean's_eleven/" title="Tag:Ocean's Eleven" class="mw-redirect TopicTooltipTrigger">Ocean's Eleven</a>, <a href="/topics/ocean's_twelve/" title="Tag:Ocean's Twelve" class="TopicTooltipTrigger">Ocean's Twelve</a><br>
</div>

<div class="tooltip">
    I'm a tooltip
    <span class="tip"></span>
</div>

CSS

body {background: #ddd;}
#TopicTextInner {margin: 70px;}

.tooltip {position: absolute; top: 300px; left: 100px; width: 200px; height: 32px; box-shadow: 1px 1px 5px rgba(0,0,0,.4); background: white;}
.tooltip .tip {position: absolute; bottom: -5px; left: 50%; width: 3px; height: 8px; background: red;}

JavaScript

var tooltip = $$('.tooltip')[0];

$$('.TopicTooltipTrigger').addEvent('mouseenter', showTooltip);

function showTooltip(event) {
    var clone = this.clone().inject(this, 'after').set('html', 'x'),
        oneLineHeight = clone.getSize().y;
    clone.destroy();

    tooltip.setStyles({
        'left': event.client.x - tooltip.getSize().x / 2,
        'top': event.client.y - oneLineHeight - tooltip.getSize().y - 4 /* offset */
    });
}