SusTooltip

Rich hover card (.sharq). For app-wide hover APIs prefer TooltipService +

Package

SusKit · Overlay (commercial)

Open in Playground

SusKit · Overlay

Props

Name	Type	Default
Text	Prop<string>	""	v-model
ShowHeader	Prop<bool>	false	v-model
HeaderIcon	Prop<string>	""	v-model
HeaderTitle	Prop<string>	""	v-model
HeaderType	Prop<string>	""	v-model
ShowBody	Prop<bool>	true	v-model
ShowDescription	Prop<bool>	true	v-model
ShowQuote	Prop<bool>	false	v-model
ShowImage	Prop<bool>	false	v-model
ShowParams	Prop<bool>	false	v-model
Description	Prop<string>	""	v-model
Quote	Prop<string>	""	v-model
ImageSrc	Prop<string>	""	v-model
ShowHero	Prop<bool>	false	v-model
HeroValue	Prop<string>	""	v-model
HeroLabel	Prop<string>	""	v-model
HeroSlot	Prop<string>	""	v-model
ShowBars	Prop<bool>	false	v-model
ShowPerks	Prop<bool>	false	v-model
ShowFooter	Prop<bool>	false	v-model
ShowFooterButtons	Prop<bool>	false	v-model
FooterText	Prop<string>	""	v-model
Disabled	Prop<bool>	false	v-model
Open	Prop<bool>	false	v-model
TrackMouse	Prop<bool>	false	v-model
PreferredSide	Prop<string>	"auto"	v-model
OpenDelay	Prop<float>	300f	v-model
CloseDelay	Prop<float>	0f	v-model
TransitionDuration	Prop<float>	280f	v-model
Offset	Prop<float>	12f	v-model
MaxWidth	Prop<float>	360f	v-model
Persistent	Prop<bool>	false	v-model
Trigger	Prop<string>	"auto"	v-model
ShowMode	Prop<string>	"popover"	v-model
Overlay	Prop<bool>	true	v-model
_animFrom	Prop<string>	"right"	v-model

Slots

Name
activator

Events

Name	Field	Payload
Close	OnClose	—

Style hooks

USS class contract — override appearance without touching C#. States toggle via these classes:

• sus-img
• sus-img--rounded-md
• sus-inventory-item__tip
• sus-tooltip
• sus-tooltip__bar
• sus-tooltip__bar-label
• sus-tooltip__bar-track
• sus-tooltip__bar-value
• sus-tooltip__bars
• sus-tooltip__body
• sus-tooltip__card
• sus-tooltip__card--from-bottom
• sus-tooltip__card--from-left
• sus-tooltip__card--from-right
• sus-tooltip__card--from-top
• sus-tooltip__card--inline
• sus-tooltip__card--placement-bottom
• sus-tooltip__card--placement-left
• sus-tooltip__card--placement-right
• sus-tooltip__card--placement-top
• sus-tooltip__card--sheet
• sus-tooltip__card--sheet-inline
• sus-tooltip__description
• sus-tooltip__footer
• sus-tooltip__footer-btn
• sus-tooltip__footer-buttons
• sus-tooltip__footer-text
• sus-tooltip__header
• sus-tooltip__header-icon
• sus-tooltip__header-title
• sus-tooltip__header-titles
• sus-tooltip__header-type
• sus-tooltip__hero
• sus-tooltip__hero-label
• sus-tooltip__hero-slot
• sus-tooltip__hero-value
• sus-tooltip__image
• sus-tooltip__param
• sus-tooltip__param-key
• sus-tooltip__param-value
• sus-tooltip__params
• sus-tooltip__perk
• sus-tooltip__perk-dot
• sus-tooltip__perk-label
• sus-tooltip__perks
• sus-tooltip__quote
• sus-tooltip__quote-text
• sus-tooltip--disabled
• sus-tooltip--inventory
• sus-tooltip--open
• sus-tooltip--popover
• sus-tooltip--rarity-common
• sus-tooltip--rarity-epic
• sus-tooltip--rarity-exotic
• sus-tooltip--rarity-legendary
• sus-tooltip--rarity-rare
• sus-tooltip--rarity-uncommon
• sus-tooltip--sheet

TooltipService (kit)

Wire once at bootstrap (OverlayHost from SusApp / SusBootstrap):

var tooltip = new TooltipService();
tooltip.Init(app.Overlay);
tooltip.CreateTooltip = () => new SusTooltip();
TooltipService.Instance = tooltip;

Fluent API

// Text
button.WithTooltip("Click to save");
icon.WithTooltip("Help", TooltipPlacement.Right);

// Rich entry (CreateCard factory)
spell.WithTooltip(new SusTooltipCardEntry {
    Title = "Fireball",
    Description = "Damage 50–70",
});

// Custom VisualElement card (ShowContent) — any factory
slot.WithTooltip(() => BuildItemCard(item), TooltipPlacement.Right);

API	Role
ShowAtElement	Text via CreateTooltip
ShowContent	Custom Func<VisualElement> on OverlayHost Tooltip layer
ShowRich	SusTooltipCardEntry via CreateCard
Hide / HideAfterDelay	Dismiss

Only one service tooltip is active at a time. Placement: Auto / Top / Bottom / Left / Right with edge clamp.

Component usage

Declarative activator + rich card props (teleports to OverlayHost on open):

var tip = new SusTooltip();
tip.ShowHeader.Value = true;
tip.HeaderTitle.Value = "Fireball";
tip.HeaderType.Value = "Spell";
tip.HeaderIcon.Value = "fire";
tip.ShowBody.Value = true;
tip.ShowDescription.Value = true;
tip.Description.Value = "Deals fire damage in a small area.";
tip.OpenDelay.Value = 200f;
tip.PreferredSide.Value = "auto";
tip.Slot("activator").Add(triggerButton);

<template>
  <sus:SusTooltip :Text="Label.Value"
                  :ShowHeader="ShowHeader.Value"
                  :HeaderTitle="Title.Value"
                  :HeaderType="Type.Value"
                  :HeaderIcon="Icon.Value"
                  :ShowDescription="ShowDesc.Value"
                  :Description="Desc.Value"
                  :PreferredSide="Side.Value"
                  :OpenDelay="Delay.Value"
                  :Open="Open.Value"
                  :Disabled="Disabled.Value">
    <template #activator>
      <sus:SusButton Text="Hover me" />
    </template>
  </sus:SusTooltip>
</template>

<script>
public Prop<string> Label = new("");
public Prop<bool> ShowHeader = new(true);
public Prop<string> Title = new("Fireball");
public Prop<string> Type = new("Spell");
public Prop<string> Icon = new("fire");
public Prop<bool> ShowDesc = new(true);
public Prop<string> Desc = new("Deals fire damage in a small area.");
public Prop<string> Side = new("auto");
public Prop<float> Delay = new(200f);
public Prop<bool> Open = new(false);
public Prop<bool> Disabled = new(false);
</script>

SusTooltip teleports its card to OverlayHost on open (same Tooltip category as the service).

Rarity headers

Inventory / item cards may set sus-tooltip--rarity-*. Colors come from kit tokens --sk-rarity-* (override in consumer theme):

Class	Token
…--rarity-common	--sk-rarity-common
…--rarity-uncommon	--sk-rarity-uncommon
…--rarity-rare	--sk-rarity-rare
…--rarity-epic	--sk-rarity-epic
…--rarity-legendary	--sk-rarity-legendary
…--rarity-exotic	--sk-rarity-exotic

Related

• Tooltips guide (synced from sus-kit 02-tooltip.md)
• OverlayHost
• SusInventoryItem — game items use SusTooltip for hover
• Layout recipes — IconRail / Wedge / Parallax / AppBar