2016-12-10 2 views
1

Ich möchte Sie fragen, ob jemand weiß, wie man diese Art von Action Tooltip in angularjs macht? AlertToolTipAngularjs Action Tooltip Service

+1

u denken, dass eine gute Praxis ist die Bestätigung in Werkzeugspitze zu bekommen ?? – Aravind

+0

können Sie versuchen https://angular-ui.github.io/bootstrap/#/tooltip der Tooltip ist anpassbar. – btinoco

+0

@Aravind Ich habe dieses Design von einem Kunden – SempachoO

Antwort

1

Hier gehts !! Ihr Tool Tipp mit Alarm, wie ich bereits sagte, ist dies keine gute Praxis, um DOM-Elemente in der Tool-Tipp Entscheidung zu treffen. Aber noch können Sie diese verwenden,

Fügen Sie diese HTML-Code in Ihre Seite, die den Tooltip enthalten wird

var app = angular.module("alert", []); 
app.controller("MainCtrl", ["$scope", function(e) { 
    e.name = "World" 
}]), app.directive("alertTooltip", ["$compile", function(e) { 
    return { 
    restrict: "A", 
    scope: { 
     alertTooltipScope: "=" 
    }, 
    link: function(n, o, t) { 
     var i = t.alertTooltip; 
     n.hidden = !0; 
     var a = angular.element("<div ng-hide='hidden'>"); 
     a.append("<div ng-include='\"" + i + "\"'></div>"), o.parent().append(a), o.on("mouseenter", function() { 
     n.hidden = !1, n.$digest() 
     }).on("mouseleave", function() { 
     n.hidden = !0, n.$digest() 
     }); 
     var l = n.$new(!0); 
     angular.extend(l, n.alertTooltipScope), e(a.contents())(l), e(a)(n) 
    } 
    } 
}]); 

LIVE DEMO