Edit in JSFiddle

console.log('start')
var getOffset = function(el) {
    var _x = 0;
    var _y = 0;
    try {
        while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
            _x += el.offsetLeft - el.scrollLeft;
            _y += el.offsetTop - el.scrollTop;
            el = el.offsetParent;
        }

    } catch (e) {
        console.error(e);
    }
    return {
        top: _y,
        left: _x
    };
}
var tooltipDecorator = function(node, tooltipId) {
    var tooltip, handlers, eventName;

    tooltip = document.getElementById(tooltipId);
    tooltip.style.display = 'none';
    tooltip.style.position = 'absolute';
    
    handlers = {
        mouseover: function() {
            tooltip = document.getElementById(tooltipId);
            tooltip.style.display = 'block';
        },

        mousemove: function(event) {
            var parentOffset = getOffset(event.currentTarget);
            tooltip.style.left = parentOffset.left + 'px';
            tooltip.style.top = parentOffset.top - tooltip.getBoundingClientRect().height + 'px';
        },

        mouseleave: function() {
            tooltip.style.display = 'none'
        }
    };

    for (eventName in handlers) {
        if (handlers.hasOwnProperty(eventName)) {
            node.addEventListener(eventName, handlers[eventName], false);
        }
    }

    return {
        teardown: function() {
            for (eventName in handlers) {
                if (handlers.hasOwnProperty(eventName)) {
                    node.removeEventListener(eventName, handlers[eventName], false);
                }
            }
        }
    }
};

Ractive.decorators.tooltip = tooltipDecorator;

ractive = new Ractive({
    el: 'container',
    template: '#tpl'
});
<div id='container'></div>

<script id='tpl' type='text/ractive'>
    <h1>Tooltip decorator</h1>
    <p>This text contains <span decorator='tooltip:one'>tooltips</span>.</p>
    <div id="one" class='ractive-tooltip'>A tooltip is a piece of helper text that appears when you mouseover a particular element</div>
</script>
body {
    font-family: 'Helvetica Neue', 'Arial';
    font-size: 16px;
    color: #353535;
}

.ractive-tooltip {
    display: block;
    position: fixed;
    max-width: 200px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    padding: 0.5em;
    font-size: 0.8em;
}

#container span {
    border-bottom: 1px dashed #999;
}