Resolves #6

Author: Michael Dobekidis

Phasetips.js

@@ -43,6 +43,10 @@ var Phasetips = function (localGame, options) {
             _this.mainGroup.visible = true;
             _this.mainGroup.alpha = 1;
         }
+
+        if(_options.onHoverCallback){
+            _options.onHoverCallback();
+        }
     };
 
     this.onHoverOut = function () {
@@ -58,6 +62,10 @@ var Phasetips = function (localGame, options) {
         else {
             _this.mainGroup.alpha = 0;
         }
+
+        if(_options.onOutCallback){
+            _options.onOutCallback();
+        }
     };
 
     this.createTooltips = function () {
@@ -92,11 +100,15 @@ var Phasetips = function (localGame, options) {
         var _object = _options.targetObject || game; // any object
         var _animationSpeedShow = _options.animationSpeedShow || 300;
         var _animationSpeedHide = _options.animationSpeedHide || 200;
+        var _onHoverCallback = _options.onHoverCallback || function() {};
+        var _onOutCallback = _options.onOutCallback || function() {};
 
         _options.animation = _animation;
         _options.animationDelay = _animationDelay;
         _options.animationSpeedShow = _animationSpeedShow;
         _options.animationSpeedHide = _animationSpeedHide;
+        _options.onHoverCallback = _onHoverCallback;
+        _options.onOutCallback = _onOutCallback;
 
         ////////////////////////////////////////////////////////////////////////////////////
         var tooltipBG;

README.md

@@ -54,6 +54,8 @@ The game instance that we want the tooltips to appear to, such as "game"
             wordWrap: true,
             wordWrapWidth: 200
         }</li>
+    <li><strong>onHoverCallback: </strong> Calls a function when hover occurs (default: fn)</li>
+    <li><strong>onOutCallback: </strong> Calls a function when hover ends (default: fn)</li>
 
 </ul>
 

assets/char1-stroke.png

@@ -7,6 +7,7 @@ var slider;
 GameState.prototype.preload = function () {
   this.load.image('bg', "http://i221.photobucket.com/albums/dd22/djmid71/bg1_zpsxrhh1f86.jpg");
   this.load.image("char", "assets/char1.png");
+  this.load.image("char-stroke", "assets/char1-stroke.png");
   this.load.image("char2", "assets/char2.png");
   this.load.image("customTip", "assets/customTip.png");
 
@@ -65,7 +66,13 @@ GameState.prototype.create = function () {
     targetObject: block1,
     context: "A cute bunny but with a lot of text, that needs to wrap!",
     strokeColor: 0xff0000,
-    position: "right"
+    position: "right",
+    onHoverCallback: function() {
+      block1.loadTexture("char-stroke");
+    },
+    onOutCallback: function() {
+      block1.loadTexture("char");
+    }
   });
 
   var tip2 = new Phasetips(_game, {