KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #ai-agents #developer-tools #ai-agent #claude-code #mcp #typescript #codex #cli #rust #deepseek-harness

Phasetips

★ 44 Open GitHub ↗

A tooltips plugin for Phaser.io game framework

// 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

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README