Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
my take on popup tool-tips title replacements with Angular.js
/*
Why include huge tooltip libraries when something like this does the job perfectly
*/
app.directive('tooltip', [function () {
return { link: function (scope, element, attr) {
// use tag's title text for a popup
element
.addClass('tooltip-wrap')
.append(angular.element('<div class="tooltip-text">'+attr.title+'</div>'))
.attr('title', null);
}};
}]);
/*
Style to your needs
*/
.tooltip-wrap {
position: relative;
.tooltip-text {
@include transition(opacity 0.7s ease);
@include opacity(0);
position: absolute;
width: 200%;
text-align: center;
left: -50%;
}
&:hover .tooltip-text {
@include opacity(1);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.