SusTooltip

富文本悬浮卡片（.sharq）。应用级悬浮 API 优先使用 TooltipService。

包

SusKit · 浮层（商业）

在 Playground 中打开

SusKit · Overlay

属性

名称	类型	默认值
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

插槽

名称
activator

事件

名称	字段	载荷
Close	OnClose	—

样式钩子

USS 类契约 — 无需改 C# 即可覆盖外观。状态通过这些类切换：

• 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）

在启动时接线一次（OverlayHost 来自 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	作用
ShowAtElement	通过 CreateTooltip 显示文本
ShowContent	在 OverlayHost 的 Tooltip 层上显示自定义 Func<VisualElement>
ShowRich	通过 CreateCard 显示 SusTooltipCardEntry
Hide / HideAfterDelay	关闭

同一时刻只有一个服务级 tooltip 处于激活状态。放置方式：Auto / Top / Bottom / Left / Right，并带边缘钳制。

组件用法

声明式激活器 + 富卡片 props（打开时会 teleport 到 OverlayHost）：

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 会在打开时将其卡片 teleport 到 OverlayHost（与服务使用同一个 Tooltip 分类）。

稀有度表头

库存 / 物品卡片可以设置 sus-tooltip--rarity-*。颜色来自 kit 令牌 --sk-rarity-* （可在消费端主题中覆盖）：

类	令牌
…--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

相关链接

• Tooltips 指南（同步自 sus-kit 的 02-tooltip.md）
• OverlayHost
• SusInventoryItem —— 游戏物品使用 SusTooltip 实现悬浮展示
• 布局方案 —— IconRail / Wedge / Parallax / AppBar