PhaseTips

A tooltips UI component for Phaser.io Javascript library

A new V3 Version is here: https://github.com/netgfx/Phaser-tooltip

<h3>Initialize the tooltip anywhere in your game</h3>

var myTooltip = new Phasetips(gameInstance, options);

pass necesery options like: context (the object that launches the tooltip)

new Phasetips(gameInstance, {
    targetObject: myObj,
    context: "Hello tooltip",
    strokeColor: 0xff0000
  });

View example: <a href="http://www.netgfx.com/trunk/games/tools/phasetips">Complete example</a>

<hr>

Game Instance The game instance that we want the tooltips to appear to, such as "game"

General Options:

<ul> <li>context: The information inside the tooltip, can be String, Number, Sprite, Phaser.Text, Phaser.BitmapText, Phaser.Group, Phaser.Image</li> <li>width: The width of the tooltip (default: auto)</li> <li>height: The height of the tooltip (default: auto)</li> <li>x: The x position of the tooltip (default: auto based on position)</li> <li>y: The y position of the tooltip (default: auto based on position)</li> <li>position: The position of the tooltip based on the targetObject (default: top, options: top, bottom, left, right)</li> <li>targetObject: The actual object in which the tooltip will appear on hover (default: Game)</li> <li>enableCursor: Enables the hand-cursor over the target object when hovered (default: false)</li> <li>disableInputEvents: If disableInputEvents option is set to true, the tooltip will not add will not add input events. Use simulateOnHoverOver, simulateOnHoverOut, hideTooltip or showTooltip API functions to manually control the visibility. (Default: false)</li> </ul>

Animation Options:

<ul> <li>animation: The animation effect (default: fade, options:fade, grow, none)</li> <li>animationSpeedShow: The duration of the animation effect showing the tooltip (default: 300)</li> <li>animationSpeedHide: The duration of the animation effect hiding the tooltip (default: 200)</li> <li>animationDelay: The animation delay before showing the tooltip (default: 0)</li> </ul>

Alignment Options:

<ul> <li>padding: The padding that the context keeps from the tooltip bounds (default: 20)</li> <li>positionOffset: The position offset that the tooltip keeps from the targetObject (default: 20)</li> <li>fixedToCamera: Pins the tooltip on the camera and moves with it (x,y are now camera offset) (default: false)</li> </ul>

Appearance Options:

<ul> <li>backgroundColor: The color of the background (default: 0x000000)</li> <li>roundedCornersRadius: Radius of the rectangle corners. Set to 1 to use a regular rectangle. (default: 1)</li> <li>strokeColor: The color of tooltip stroke (default: 0xffffff)</li> <li>strokeWeight: The line weight of the tooltip stroke (default: 2)</li> <li>customBackground: If the tooltip will use a custom background (default: false)</li> <li>initialOn: If the tooltip will visible when it first appears</li> </ul>

Font Options:

It is also possible to define individual text style options.

<ul> <li>font: The style and size of the font. This is overridden if you set any of the following font options. (default: '')</li> <li>fontSize: The size of the font. Accepts either string or number. eg. 12 or '12px' (default: 12)</li> <li>fontFill: A canvas fillstyle that will be used on the text eg 'red', '#00FF00'. (default: '#FFFFFF')</li> <li>fontStroke: A canvas stroke style that will be used on the text stroke eg 'blue', '#FCFF00'. (default: '#232323')</li> <li>fontStrokeThickness: A number that represents the thickness of the stroke. Set 0 for no stroke. (default: 1)</li> <li>fontWordWrap: Indicates if word wrap should be used. (default: true)</li> <li>fontWordWrapWidth: The width in pixels at which text will wrap. (default: 200)</li> </ul>

Text Style Options:

Set an object with respective properties to define all at once.

<ul> <li>textStyle: Declares styles for the simple text element. Individual font options above are overridden if the textStyle option is set. Default:</li> </ul>

{
    font: '',
    fontSize: 12,
    fill: "#ffffff",
    stroke: "#1e1e1e",
    strokeThickness: 1,
    wordWrap: true,
    wordWrapWidth: 200,
    lineSpacing: -2
}

Callback Options:

<ul> <li>onHoverCallback: Calls a function when hover occurs (default: fn)</li> <li>onOutCallback: Calls a function when hover ends (default: fn)</li> </ul>

API Functions

<ul> <li>printOptions: Prints the options specified in the constructor on the console</li> <li>updatePosition: Change the x, y of the tooltip</li> <li>destroy: Destroys the tooltip and all its children</li> <li>hideTooltip: Hide the tooltip</li> <li>showTooltip: Show the tooltip</li> <li>simulateOnHoverOver: Simulates onHoverOver</li> <li>simulateOnHoverOut: Simulates onHoverOut</li> </ul> <hr>

Buy me a coffee or tea! <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=JCFPKZJ7Y23JJ&lc=GR&item_name=NetGfx%2ecom&currency_code=EUR&bn=PP%2dDonationsBF%3abtn_donate_SM%2egif%3aNonHosted"><img src="https://www.paypalobjects.com/webstatic/en_US/btn/btn_donate_92x26.png"/></a>

<hr>

The TODO list is diminising!

Please let me know if you come across some bug or have something to contribute

Phasetips

Install / Use

README

PhaseTips

A new V3 Version is here: https://github.com/netgfx/Phaser-tooltip