Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Tooltip 提示工具条

提供鼠标悬停或者获得焦点后显示提示框

基础用法

常用于展示鼠标 hover 时的提示信息

Demo

Button 组件提示框

提供鼠标悬停或者获得焦点后显示提示框

Demo

Attributes

Loading...
@page "/tooltips"

<h3>Tooltip 提示工具条</h3>

<h4>提供鼠标悬停或者获得焦点后显示提示框</h4>

<Block Title="基础用法" Introduction="常用于展示鼠标 hover 时的提示信息">
    <div class="d-flex flex-column w-100 tooltip-demo">
        <div class="d-flex justify-content-center">
            <BootstrapInput Value="@BottomString">
                <Tooltip Placement="Placement.Bottom" Title="Tootip" />
            </BootstrapInput>
        </div>
        <div class="d-flex justify-content-between align-items-center flex-fill">
            <BootstrapInput Value="@RightString">
                <Tooltip Placement="Placement.Right" Title="Tootip" />
            </BootstrapInput>
            <BootstrapInput Value="@LeftString">
                <Tooltip Placement="Placement.Left" Title="Tootip" />
            </BootstrapInput>
        </div>
        <div class="d-flex justify-content-center">
            <BootstrapInput Value="@TopString">
                <Tooltip Placement="Placement.Top" Title="Tootip" />
            </BootstrapInput>
        </div>
    </div>
</Block>

<Block Title="Button 组件提示框" Introduction="提供鼠标悬停或者获得焦点后显示提示框">
    <div class="form-inline">
        <div class="row">
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Button>
                    @TopString
                    <Tooltip Placement="Placement.Top" Title="Tootip" />
                </Button>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Button>
                    @LeftString<Tooltip Placement="Placement.Left" Title="Tootip" />
                </Button>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Button>
                    @BottomString<Tooltip Placement="Placement.Bottom" Title="Tootip" />
                </Button>
            </div>
            <div class="form-group col-6 col-sm-4 col-md-3 col-lg-auto">
                <Button>
                    @RightString<Tooltip Placement="Placement.Right" Title="Tootip" />
                </Button>
            </div>
        </div>
    </div>
</Block>

<AttributeTable Items="@GetAttributes()" />

@code {
    private string TopString => "在上方";

    private string LeftString => "在左方";

    private string RightString => "在右方";

    private string BottomString => "在下方";
}
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

using BootstrapBlazor.Shared.Common;
using System.Collections.Generic;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public partial class Tooltips
    {
        /// <summary>
        /// 获得属性方法
        /// </summary>
        /// <returns></returns>
        protected IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "Placement",
                Description = "位置",
                Type = "Placement",
                ValueList = "Auto / Top / Left / Bottom / Right",
                DefaultValue = "Auto"
            }
        };
    }
}

B 站相关视频链接

暂无

交流群

QQ群:BootstrapAdmin & Blazor 795206915(满) 675147445 欢迎加群讨论
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload