Skip to content

Instantly share code, notes, and snippets.

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
.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