Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Tooltip 提示工具条

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

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

Demo

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

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="row g-3">
            <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
                <Button>
                    @TopString
                    <Tooltip Placement="Placement.Top" Title="Tootip" />
                </Button>
            </div>
            <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
                <Button>
                    @LeftString<Tooltip Placement="Placement.Left" Title="Tootip" />
                </Button>
            </div>
            <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
                <Button>
                    @BottomString<Tooltip Placement="Placement.Bottom" Title="Tootip" />
                </Button>
            </div>
            <div class="col-6 col-sm-4 col-md-3 col-lg-auto">
                <Button>
                    @RightString<Tooltip Placement="Placement.Right" Title="Tootip" />
                </Button>
            </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 Group:BootstrapAdmin & Blazor 795206915( Full) 675147445 Welcome to join the group discussion
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
Motronic (已集成)
An error has occurred. This application may no longer respond until reloaded. Reload