材料设计精简版-工具提示(1)

📌 相关文章

📜 材料设计精简版-工具提示(1)

📅 最后修改于: 2023-12-03 15:40:20.569000 🧑 作者: Mango

材料设计精简版-工具提示

简介

材料设计精简版-工具提示是一个简化版的材料设计风格的工具提示组件，旨在提供简单且易于使用的工具提示功能。

特性

材料设计风格
易于使用
支持多种触发方式
可自定义样式

使用方法

引入组件

<head>
  <link rel="stylesheet" href="path/to/material-design-tooltip.css">
</head>
<body>
  <!-- your HTML code here -->
  <script src="path/to/material-design-tooltip.js"></script>
</body>

HTML结构

<div class="md-tooltip" data-md-tooltip="Tooltip content">
  <button>Hover me!</button>
</div>

JS初始化

<script>
  var tooltips = document.querySelectorAll('.md-tooltip');
  for (var i = 0; i < tooltips.length; i++) {
    new MaterialDesignTooltip(tooltips[i]);
  }
</script>

API

| 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | data-md-tooltip | 工具提示的文本内容 | string | - | | data-md-tooltip-position | 工具提示的位置，可选值为：top、right、bottom、left | string | bottom | | data-md-tooltip-type | 工具提示的类型，可选值为：default、success、warning、error | string | default |

自定义样式

你可以通过修改CSS样式来自定义工具提示的样式，以下是默认样式：

.md-tooltip {
  position: relative;
  display: inline-block;
  overflow: visible;
  cursor: help;
}

.md-tooltip-content {
  display: none;
  position: absolute;
  padding: 8px;
  font-size: 14px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.75);
  border-radius: 4px;
  z-index: 1;
  white-space: nowrap;
}

.md-tooltip[data-md-tooltip-position='top'] .md-tooltip-content {
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
}

.md-tooltip[data-md-tooltip-position='right'] .md-tooltip-content {
  top: 50%;
  left: 120%;
  transform: translateY(-50%);
}

.md-tooltip[data-md-tooltip-position='bottom'] .md-tooltip-content {
  top: 120%;
  left: 50%;
  transform: translateX(-50%);
}

.md-tooltip[data-md-tooltip-position='left'] .md-tooltip-content {
  top: 50%;
  right: 120%;
  transform: translateY(-50%);
}

.md-tooltip[data-md-tooltip-type='success'] .md-tooltip-content {
  background-color: #4caf50;
}

.md-tooltip[data-md-tooltip-type='warning'] .md-tooltip-content {
  background-color: #ffc107;
}

.md-tooltip[data-md-tooltip-type='error'] .md-tooltip-content {
  background-color: #f44336;
}

示例

<div class="md-tooltip" data-md-tooltip="Default tooltip content">
  <button>Hover me!</button>
</div>

<div class="md-tooltip" data-md-tooltip="Success tooltip content" data-md-tooltip-type="success">
  <button>Hover me too!</button>
</div>

<div class="md-tooltip" data-md-tooltip="Warning tooltip content" data-md-tooltip-type="warning">
  <button>And me!</button>
</div>

<div class="md-tooltip" data-md-tooltip="Error tooltip content" data-md-tooltip-type="error">
  <button>Me three!</button>
</div>