注意:由于是其他元素上的提示,没有单独的组件,使用data-tooltip,和一组@B.ToolTip*类实现
注意:由于是其他元素上的提示,没有单独的组件,使用data-tooltip,和一组@B.ToolTip*类实现
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa fugit dolores earum quod distinctio ducimus non dignissimos molestias amet corrupti voluptatum assumenda impedit beatae veritatis nemo veniam error, hic cumque.
<p>
Lorem ipsum dolor sit amet,
<span data-tooltip="Tooltip content">consectetur adipisicing elit</span>.
Ipsa fugit dolores earum quod distinctio ducimus non dignissimos
molestias amet corrupti voluptatum assumenda impedit beatae veritatis nemo
veniam error, hic cumque.
</p>
<br>
<Buttons>
<Button data-tooltip="Tooltip Text">默认</Button>
<Button class="@B.TooltipActive" data-tooltip="Tooltip Text">一直显示</Button>
<Button class="@B.TooltipArrow" data-tooltip="Tooltip Text">有箭头</Button>
</Buttons>
<br>
<Buttons>
<Button class="@B.TooltipRight" data-tooltip="Tooltip Text">Right</Button>
<Button class="@B.TooltipLeft" data-tooltip="Tooltip Text">Left</Button>
<Button class="@B.TooltipBottom" data-tooltip="Tooltip Text">Bottom</Button>
</Buttons>
<br>
<Buttons>
<Button class="@(B.Join(B.TooltipArrow, B.TooltipTextLeft))" data-tooltip="Tooltip Text">TextLeft</Button>
<Button class="@(B.Join(B.TooltipArrow, B.TooltipTextCentered))" data-tooltip="Tooltip Text">TextCentered</Button>
<Button class="@(B.Join(B.TooltipArrow, B.TooltipTextRight))" data-tooltip="Tooltip Text">TextRight</Button>
</Buttons>
<br>
<Buttons>
<Button class="@(B.Join(B.TooltipArrow, B.TooltipInfo))" data-tooltip="Tooltip Text">Info</Button>
<Button class="@(B.Join(B.TooltipArrow, B.TooltipDanger))" data-tooltip="Tooltip Text">Danger</Button>
<Button class="@(B.Join(B.TooltipArrow, B.TooltipPrimary))" data-tooltip="Tooltip Text">Primary</Button>
<Button class="@(B.Join(B.TooltipArrow, B.TooltipWarning))" data-tooltip="Tooltip Text">Warning</Button>
<Button class="@(B.Join(B.TooltipArrow, B.TooltipSuccess))" data-tooltip="Tooltip Text">Success</Button>
</Buttons>
#region tooltip
/// <summary>
/// 是否有箭头
/// </summary>
public static readonly string TooltipArrow = "has-tooltip-arrow";
/// <summary>
/// has-tooltip-active 是否一直显示
/// </summary>
public static readonly string TooltipActive = "has-tooltip-active";
/// <summary>
/// has-tooltip-right
/// </summary>
public static readonly string TooltipRight = "has-tooltip-right";
/// <summary>
/// has-tooltip-bottom
/// </summary>
public static readonly string TooltipBottom = "has-tooltip-bottom";
/// <summary>
/// has-tooltip-left
/// </summary>
public static readonly string TooltipLeft = "has-tooltip-left";
/// <summary>
/// has-tooltip-multiline 是否多行
/// </summary>
public static readonly string TooltipMultiline = "has-tooltip-multiline";
/// <summary>
/// has-tooltip-text-left
/// </summary>
public static readonly string TooltipTextLeft = "has-tooltip-text-left";
/// <summary>
/// has-tooltip-text-centered
/// </summary>
public static readonly string TooltipTextCentered = "has-tooltip-text-centered";
/// <summary>
/// has-tooltip-text-right
/// </summary>
public static readonly string TooltipTextRight = "has-tooltip-text-right";
/// <summary>
/// has-tooltip-info
/// </summary>
public static readonly string TooltipInfo = "has-tooltip-info";
/// <summary>
/// has-tooltip-warning
/// </summary>
public static readonly string TooltipWarning = "has-tooltip-warning";
/// <summary>
/// has-tooltip-primary
/// </summary>
public static readonly string TooltipPrimary = "has-tooltip-primary";
/// <summary>
/// has-tooltip-success
/// </summary>
public static readonly string TooltipSuccess = "has-tooltip-success";
/// <summary>
/// has-tooltip-danger
/// </summary>
public static readonly string TooltipDanger = "has-tooltip-danger";
#endregion
文档