Phasetips

KO | EN

gitlite — search

#javascript #hacktoberfest #llm #golang #go #machine-learning #rust #linux #nodejs #awesome #kubernetes #mcp #ios #open-source

(★ 44)

A tooltips plugin for Phaser.io game framework

Phasetips Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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
  });
```

<hr>

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

Phasetips Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Phasetips

Phasetips Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README