Tooltip

tooltip.coffee

Ractive.components.tooltip = Ractive.extend
    template: "<div class='tooltip-container' style='position: absolute; top: 0; bottom: 0; right: 0; left: 0' decorator='tooltip'></div>"

    data: {
        _show: false
    }

    onrender: () ->
        pos = $(@el).css('position')
        if pos != 'absolute' && pos != 'fixed' && pos != 'relative'
            $(@el).css('position', 'relative')

    decorators:
        tooltip: (node, content) ->
            r = node._ractive.root

            tooltipRactive = new Ractive
                template: r.partials.content[0]

            handlers = {
                mouseover: (evt) ->
                    tooltipRactive.insert('body')
                mousemove: (evt) ->
                    tooltipRactive.el.style.left = "#{evt.clientX}px"
                    tooltipRactive.el.style.top = "#{evt.clientY + tooltipRactive.el.clientHeight - 20}px"
                mouseleave: (evt) ->
                    tooltipRactive.detach()
            }

            for evt, handler of handlers
                node.addEventListener evt, handler, false

            return teardown: () ->
                for evt, handler of handlers
                    node.removeEventListener evt, handler, false
                tooltipRactive.teardown()
                return

use.ractive

<tooltip>
  <div class='custom-tooltip'>
    <h4>{{header}}</h4>
    <pre>{{content}}</pre>
  </div>
</tooltip>

I can't figure out how to access and render the yielded partial from inside the decorator. Is this currently possible?