Angularjs rendering directive with transclude on body

I want to create a tooltip attribute directive with transclude, and render it on the body..

for example:

<div tooltip>
    <transcluded-content>content</transcluded-content>
</div>

module.directive('tooltip', function () {
    return {
            restrict: 'A',
            templateUrl: 'tooltip.html',
            transclude: {
                'transcluded-content': 'transcluded-content'
            }
        };
    });

I want to render the template on the body instead of the div...

In order to have the element on the body, you could try moving it in the link function. How about this?

module.directive('tooltip', function () {
    return {
            restrict: 'A',
            templateUrl: 'tooltip.html',
            transclude: {
                'transcluded-content': 'transcluded-content'
            },
            link: function (scope, element) {
                angular.element('body').append(element);
            }
        };
    });

There are more complex approaches, but they'll require $compile-ing and other messy techniques.