diff --git a/addons/hr_attendance/static/src/css/slider.css b/addons/hr_attendance/static/src/css/slider.css
index 9e0252156b2..0fde21dc727 100644
--- a/addons/hr_attendance/static/src/css/slider.css
+++ b/addons/hr_attendance/static/src/css/slider.css
@@ -1,7 +1,7 @@
 
 .openerp .oe_attendance_status {
     height: 32px;
-    width: 32px;
+    width: 64px;
     display: inline-block;
 }
 .openerp .oe_attendance_signin {
@@ -12,7 +12,7 @@
     cursor: pointer;
 }
 .openerp .oe_attendance_status.oe_attendance_signed .oe_attendance_signin {
-    display: none;
+    background: url(/hr_attendance/static/src/img/emp-in-disable32.png);
 }
 
 .openerp .oe_attendance_signout {
@@ -23,5 +23,5 @@
     cursor: pointer;
 }
 .openerp .oe_attendance_status.oe_attendance_nosigned .oe_attendance_signout {
-    display: none;
+    background: url(/hr_attendance/static/src/img/emp-out-disable32.png);
 }
diff --git a/addons/hr_attendance/static/src/js/attendance.js b/addons/hr_attendance/static/src/js/attendance.js
index f6a4c15268a..f05cef2e001 100644
--- a/addons/hr_attendance/static/src/js/attendance.js
+++ b/addons/hr_attendance/static/src/js/attendance.js
@@ -4,11 +4,6 @@ openerp.hr_attendance = function (instance) {
     var QWeb = instance.web.qweb;
     var _t = instance.web._t;
     var _lt = instance.web._lt;
-    
-    var tips = {
-        "true": _lt("You are currently signed in. Click here to sign out."),
-        "false": _lt("You are currently signed out. Click here to sign in."),
-    }
 
     instance.hr_attendance.AttendanceSlider = instance.web.Widget.extend({
         template: 'AttendanceSlider',
@@ -21,7 +16,6 @@ openerp.hr_attendance = function (instance) {
             var tmp = function() {
                 this.$el.toggleClass("oe_attendance_nosigned", ! this.get("signed_in"));
                 this.$el.toggleClass("oe_attendance_signed", this.get("signed_in"));
-                this.$el.attr("title", tips["" + this.get("signed_in")].toString());
             };
             this.on("change:signed_in", this, tmp);
             _.bind(tmp, this)();
@@ -31,6 +25,15 @@ openerp.hr_attendance = function (instance) {
             this.$(".oe_attendance_signout").click(function() {
                 self.do_update_attendance();
             });
+            this.$el.tipsy({
+                title: function() {
+                    if (self.get("signed_in")) {
+                        return _t("You are currently signed in. Click here to sign out.");
+                    } else {
+                        return _t("You are currently signed out. Click here to sign in.");
+                    }
+                }
+            });
             return this.check_attendance();
         },
         do_update_attendance: function () {
diff --git a/addons/hr_attendance/static/src/xml/attendance.xml b/addons/hr_attendance/static/src/xml/attendance.xml
index 6896086440f..3fd9bcf2798 100644
--- a/addons/hr_attendance/static/src/xml/attendance.xml
+++ b/addons/hr_attendance/static/src/xml/attendance.xml
@@ -1,6 +1,6 @@
 <template>
     <t t-name="AttendanceSlider">
-        <div class="oe_attendance_status oe_attendance_nosigned" title=" ">
+        <div class="oe_attendance_status oe_attendance_nosigned" data-tipsy="true">
              <div class="oe_attendance_signin"></div>
              <div class="oe_attendance_signout"></div>
         </div>