NssTip

A toast/notification component with configurable position and auto-hide duration. NUI

Getting Started

NssTip displays a temporary message at a configurable screen position. It fades in, stays for a set duration, and fades out automatically.

import {NssTip} from "nui://nss_libs/ui/NssTip/NssTip.js";

const tip = new NssTip('Item added to inventory');
tip.setBottomCenter().setDuration(3000).show();

Constructor

new NssTip(message)

Creates a new tip with the given message.

Param	Type	Default	Description
message	string	—	The message to display. Supports HTML

const tip = new NssTip('Settings saved');
const tip = new NssTip('<strong>Error:</strong> Invalid input');

Methods

.show()

Displays the tip and automatically hides it after the configured duration.

Returns Promise<void> — resolves when the tip has fully faded out and been removed.

tip.show().then(() => {
    console.log('Tip is gone');
});

---

.hide(force_now?)

Hides the tip with a fade-out animation, or removes it immediately.

Param	Type	Default	Description
force_now	boolean	false	If true, removes the tip immediately without animation

Returns undefined

Animated

tip.hide();           // Fade out

Immediate

tip.hide(true);       // Remove immediately

---

.destroyNow()

Shorthand for hide(true) — removes the tip immediately.

Returns undefined

tip.destroyNow();

---

.setDuration(ms)

Sets the auto-hide duration.

Param	Type	Default	Description
ms	number	4000	Duration in milliseconds before the tip auto-hides

Returns NssTip — chainable.

tip.setDuration(5000); // Show for 5 seconds

---

Position Methods

Set the screen position of the tip. Default is bottom-center. All position methods return NssTip for chaining.

Method	Position
setTopLeft()	Top-left corner
setTopCenter()	Top-center
setTopRight()	Top-right corner
setCenterLeft()	Center-left
setCenterCenter()	Center of screen
setCenterRight()	Center-right
setBottomLeft()	Bottom-left corner
setBottomCenter()	Bottom-center (default)
setBottomRight()	Bottom-right corner

Center Error

new NssTip('Something went wrong')
    .setCenterCenter()
    .setDuration(5000)
    .show();

Top-Right Success

new NssTip('Saved!')
    .setTopRight()
    .show();

Events / Callbacks

None. Use the Promise returned by show() to react to the tip disappearing.

CSS

Classes

Class	Description
.nss-tip	Base tip element
.nss-tip--out	Fade-out animation state
.nss-tip--tl	Top-left position
.nss-tip--tc	Top-center position
.nss-tip--tr	Top-right position
.nss-tip--cl	Center-left position
.nss-tip--cc	Center-center position
.nss-tip--cr	Center-right position
.nss-tip--bl	Bottom-left position
.nss-tip--bc	Bottom-center position (default)
.nss-tip--br	Bottom-right position

Custom Properties

Property	Default	Description
--nss-tip-anim-duration	500ms	Fade in/out animation duration. Defined on :root
--margin	var(--25rpx)	Margin from screen edge

Animations

Keyframe	Description
nss-tip-anim__fade-in	Opacity 0 → 1
nss-tip-anim__fade-out	Opacity 1 → 0

Dependencies

• NssUiComponent — base class (initializes NssResponsive).

Things to Know

TIP

Each NssTip instance is a one-shot display — after it fades out, the DOM element is removed. Create a new instance for each notification.

• The total visible time is duration + 500ms (animation in/out time).
• Multiple tips can be shown simultaneously at different positions — they don't interfere with each other.
• The message supports HTML, so you can include formatting like <strong>, <em>, or custom elements.