diff --git a/css/bootstrap-magic-button.css b/css/bootstrap-magic-button.css
index 84edbf3..18f24b3 100644
--- a/css/bootstrap-magic-button.css
+++ b/css/bootstrap-magic-button.css
@@ -1,21 +1,21 @@
 button[class^=magicBtn] {
-	display: none;
-	position: absolute;
-	border-style: none;
-	background: none;
-	background-repeat: no-repeat;
-	width: 47px;
-	height: 32px;
-	opacity: 0.7;
+  display: none;
+  position: absolute;
+  border-style: none;
+  background: none;
+  background-repeat: no-repeat;
+  width: 47px;
+  height: 32px;
+  opacity: 0.7;
 }
 
 button[class*="magicBtn-active"] {
-	position: absolute;
-	border-style: none;
-	background: none;
-	background-repeat: no-repeat;
-	width: 47px;
-	height: 32px;
-	opacity: 1;
+  position: absolute;
+  border-style: none;
+  background: none;
+  background-repeat: no-repeat;
+  width: 47px;
+  height: 32px;
+  opacity: 1;
 }
 
diff --git a/example/css/bootstrap-magic-button.css b/example/css/bootstrap-magic-button.css
index 84edbf3..c47a12e 100644
--- a/example/css/bootstrap-magic-button.css
+++ b/example/css/bootstrap-magic-button.css
@@ -1,21 +1,22 @@
 button[class^=magicBtn] {
-	display: none;
-	position: absolute;
-	border-style: none;
-	background: none;
-	background-repeat: no-repeat;
-	width: 47px;
-	height: 32px;
-	opacity: 0.7;
+  display: none;
+  position: absolute;
+  border-style: none;
+  background: none;
+  background-repeat: no-repeat;
+  width: 47px;
+  height: 32px;
+  opacity: 0.7;
 }
 
 button[class*="magicBtn-active"] {
-	position: absolute;
-	border-style: none;
-	background: none;
-	background-repeat: no-repeat;
-	width: 47px;
-	height: 32px;
-	opacity: 1;
+  font-weight: bold;
+  position: absolute;
+  border-style: none;
+  background: none;
+  background-repeat: no-repeat;
+  width: 47px;
+  height: 32px;
+  opacity: 1;
 }
 
diff --git a/example/index.html b/example/index.html
index 0343443..b583e8d 100644
--- a/example/index.html
+++ b/example/index.html
@@ -56,7 +56,7 @@
         <br />
         <p> It's a plugin that make it possible for any button to float on it's parent div
         </p>
-        <button class="magicBtn hero"><a href="#example"><i class="icon-chevron-down"></i></a></button>
+        <button value="test" class="magicBtn hero"><a href="#example"><i class="icon-chevron-down"></i></a></button>
         <button class="magicBtn hero"><a href="http://twitter.com/share?url=http://sp4ke.github.com/bootstrap-magic-button/&text=Bootstrap magic buttons @ChakibBenz&count=horiztonal" target="_blank" rel="nofollow"><i class="icon-retweet"></i></a></button>
       </div>
 
@@ -179,8 +179,8 @@
           <br />
           <div class="well span3">
             <p>Just put the icons inside the button</p>
-            <button class="magicBtn icon"><i class="icon-search"></i></button>
-            <button class="magicBtn icon"><i class="icon-user"></i></button>
+            <button value="search" class="magicBtn icon"><i class="icon-search"></i></button>
+            <button value="user" class="magicBtn icon"><i class="icon-user"></i></button>
           </div>
 
         </div>
diff --git a/example/js/bootstrap-magic-button.js b/example/js/bootstrap-magic-button.js
index 59a8ac8..ede5287 100644
--- a/example/js/bootstrap-magic-button.js
+++ b/example/js/bootstrap-magic-button.js
@@ -52,18 +52,19 @@ function ($) {
             // current button image and toggle image if there is
             this.$imgUrl = 'url("' + this.$element.data('image') + '")'
             var toggleimg
-            if (toggleimg = this.$element.data('toggle-image')) this.$toggleImgUrl = 'url("' + toggleimg + '")'
-            else this.$toggleImgUrl = this.$imgUrl
-
-	    // store toggle initial status if there is
-	    var togglestatus
-	if (togglestatus = this.$element.data('initial-toggle-status')){
-	    togglestatus == 'toggled' ? this.toggle() : this.$isToggled = false
-	}
-        else this.$isToggled = false
-        if (this.options.hover) this.addHover()
-			
-        }
+            if (toggleimg = this.$element.data('toggle-image')) 
+                this.$toggleImgUrl = 'url("' + toggleimg + '")'
+            else
+                this.$toggleImgUrl = this.$imgUrl
+
+            // store toggle initial status if there is
+            var togglestatus
+            if (togglestatus = this.$element.data('initial-toggle-status')){
+                togglestatus == 'toggled' ? this.toggle() : this.$isToggled = false
+            }
+            else this.$isToggled = false
+            if (this.options.hover) this.addHover()
+    }
 
     MagicBtn.prototype = {
 
@@ -170,18 +171,41 @@ function ($) {
         }
 
         ,
+        _hoverInCallback: function () {
+            var obj = $(this).data('magicBtn')
+            var o = obj.options
+            if (!obj.$isToggled) {
+                if (o.hoverText){
+                    $(this).find('i').hide()
+                    $('<span class="value">' + $(this).attr('value') + '</span>').
+                        hide().appendTo($(this)).fadeIn()
+                }
+                $(this).toggleClass('magicBtn-active')
+            }
+        }
+        ,
+
+        _hoverOutCallback: function () {
+            var obj = $(this).data('magicBtn')
+            var o = obj.options
+            var $el = $(this)
+            if ((!obj.$isToggled) && (!$el.is(':hover')) && ($el.hasClass('magicBtn-active'))){
+                if (o.hoverText){
+                    $(this).find('.value').fadeOut('slow').remove()
+                    $(this).find('i').show(100)
+                }
+                $(this).toggleClass('magicBtn-active', 100)
+            }
+        }
+        ,
+
         addHover: function () {
             var $el = this.$element
-            var obj = this
             var config = {
-                over: function () {
-                    if (!obj.$isToggled) $(this).toggleClass('magicBtn-active')
-                },
+                over: this._hoverInCallback,
                 timeout: 10,
                 interval: 10,
-                out: function () {
-                    if ((!obj.$isToggled) && (!$el.is(':hover')) && ($el.hasClass('magicBtn-active'))) $(this).toggleClass('magicBtn-active', 100)
-                }
+                out: this._hoverOutCallback
             }
             $el.hoverIntent(config)
 
@@ -214,7 +238,8 @@ function ($) {
         direction: 'right',
         betweenSpace: 2,
         alignment: 'center',
-        hover: false
+        hover: false,
+        hoverText: false
     }
 
     $.fn.magicBtn.Constructor = MagicBtn
diff --git a/js/bootstrap-magic-button.js b/js/bootstrap-magic-button.js
index 59a8ac8..ede5287 100644
--- a/js/bootstrap-magic-button.js
+++ b/js/bootstrap-magic-button.js
@@ -52,18 +52,19 @@ function ($) {
             // current button image and toggle image if there is
             this.$imgUrl = 'url("' + this.$element.data('image') + '")'
             var toggleimg
-            if (toggleimg = this.$element.data('toggle-image')) this.$toggleImgUrl = 'url("' + toggleimg + '")'
-            else this.$toggleImgUrl = this.$imgUrl
-
-	    // store toggle initial status if there is
-	    var togglestatus
-	if (togglestatus = this.$element.data('initial-toggle-status')){
-	    togglestatus == 'toggled' ? this.toggle() : this.$isToggled = false
-	}
-        else this.$isToggled = false
-        if (this.options.hover) this.addHover()
-			
-        }
+            if (toggleimg = this.$element.data('toggle-image')) 
+                this.$toggleImgUrl = 'url("' + toggleimg + '")'
+            else
+                this.$toggleImgUrl = this.$imgUrl
+
+            // store toggle initial status if there is
+            var togglestatus
+            if (togglestatus = this.$element.data('initial-toggle-status')){
+                togglestatus == 'toggled' ? this.toggle() : this.$isToggled = false
+            }
+            else this.$isToggled = false
+            if (this.options.hover) this.addHover()
+    }
 
     MagicBtn.prototype = {
 
@@ -170,18 +171,41 @@ function ($) {
         }
 
         ,
+        _hoverInCallback: function () {
+            var obj = $(this).data('magicBtn')
+            var o = obj.options
+            if (!obj.$isToggled) {
+                if (o.hoverText){
+                    $(this).find('i').hide()
+                    $('<span class="value">' + $(this).attr('value') + '</span>').
+                        hide().appendTo($(this)).fadeIn()
+                }
+                $(this).toggleClass('magicBtn-active')
+            }
+        }
+        ,
+
+        _hoverOutCallback: function () {
+            var obj = $(this).data('magicBtn')
+            var o = obj.options
+            var $el = $(this)
+            if ((!obj.$isToggled) && (!$el.is(':hover')) && ($el.hasClass('magicBtn-active'))){
+                if (o.hoverText){
+                    $(this).find('.value').fadeOut('slow').remove()
+                    $(this).find('i').show(100)
+                }
+                $(this).toggleClass('magicBtn-active', 100)
+            }
+        }
+        ,
+
         addHover: function () {
             var $el = this.$element
-            var obj = this
             var config = {
-                over: function () {
-                    if (!obj.$isToggled) $(this).toggleClass('magicBtn-active')
-                },
+                over: this._hoverInCallback,
                 timeout: 10,
                 interval: 10,
-                out: function () {
-                    if ((!obj.$isToggled) && (!$el.is(':hover')) && ($el.hasClass('magicBtn-active'))) $(this).toggleClass('magicBtn-active', 100)
-                }
+                out: this._hoverOutCallback
             }
             $el.hoverIntent(config)
 
@@ -214,7 +238,8 @@ function ($) {
         direction: 'right',
         betweenSpace: 2,
         alignment: 'center',
-        hover: false
+        hover: false,
+        hoverText: false
     }
 
     $.fn.magicBtn.Constructor = MagicBtn