SusTooltip

Rich hover card (.sharq). Для app-wide hover API предпочитайте TooltipService.

Пакет

SusKit · Оверлей (коммерческий)

Открыть в песочнице

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

События

Имя	Поле	Payload
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)

Подключите один раз при bootstrap (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	Произвольный Func<VisualElement> на слое Tooltip OverlayHost
ShowRich	SusTooltipCardEntry через CreateCard
Hide / HideAfterDelay	Скрытие

Одновременно активен только один service tooltip. Расположение: Auto / Top / Bottom / Left / Right с прижатием к краю.

Использование компонента

Декларативный activator + props богатой карточки (телепортируется в 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 телепортирует свою карточку в 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 guide (синхронизировано из sus-kit 02-tooltip.md)
• OverlayHost
• SusInventoryItem — игровые предметы используют SusTooltip для hover
• Layout recipes — IconRail / Wedge / Parallax / AppBar