CSS 提示工具(Tooltip)

本文为大家介绍如何使用HTML和CSS来实现提示工具，

提示工具在鼠标移动到制定元素后触发,先看下面示例：

1.基础提示工具代码如下：

<!doctye html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>右提示工具</title>

    <style>

    *{

    margin:0;

    padding:0;

}

body{

    text-align:center;

    padding-top:50px;

}

.tooltip{

    display:inline-block;

    position:relative;

}

.btn{

    display:block;

    padding:20px;

    background:#f0f;

    color:white;

}

.bottom{

    position:relative;

    background:#aaa;

    width:160px;

    position:absolute;

    left:110%;

    top:10%;

    text-align:left;

    padding:12px;

    opacity:0;

    transition:1s;

    color:white;

    border-radius:10px;

}

.tooltip:hover .bottom{

    opacity:1;

}

.bottom:after{

    content:"";

    border:5px solid;

    border-color:transparent #aaa transparent  transparent ;

    position:absolute;

    left:-10px;

    margin-top:5px;

}

    </style>

</head>

<body>

    <div class="tooltip">

        <span class="btn">右提示工具</span>

        <div class="bottom">

            提示工具

        </div>

    </div>

</body>

</html>

运行结果如下图：

2.添加箭头

我们可以用CSS 伪元素 ::after 及 content 属性为提示工具创建一个小箭头标志，箭头是由边框组成的

.tooltip .tooltiptext {

    width: 120px;

    top: 100%;

    left: 50%;

    margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */

}

3.技术要点：

  • 父元素相对定位
  • 提示框绝对定位
  • 箭头绝对定位
  • 淡入效果（我们可以使用 CSS3 transition 属性及 opacity 属性来实现提示工具的淡入效果）

持续更新，欢迎大家指教！

CSS 提示工具(Tooltip)的更多相关文章

  1. CSS：CSS 提示工具(Tooltip)

    ylbtech-CSS:CSS 提示工具(Tooltip) 1.返回顶部 1. CSS 提示工具(Tooltip) 本文我们为大家介绍如何使用 HTML 与 CSS 来创建提示工具. 提示工具在鼠标移 ...

  2. Bootstrap 提示工具(Tooltip)插件的事件

    事件 下表列出了提示工具(Tooltip)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 show.bs.tooltip 当调用 show 实例方法时立即触发该事件. $('#m ...

  3. Bootstrap 提示工具(Tooltip)插件方法的用法

    方法 下面是一些提示工具(Tooltip)插件中有用的方法: 方法 描述 实例 Options: .tooltip(options) 向元素集合附加提示工具句柄. $().tooltip(option ...

  4. Bootstrap 提示工具(Tooltip)插件

    当您想要描述一个链接的时候,使用提示工具插件是一个不错的选择.Bootstrap提示工具插件做了很多的改进,例如不需要依赖图像,而是改变Css动画效果,用data属性来存储标题信息. 用法 提示工具( ...

  5. CSS Tooltip（提示工具）

    CSS Tooltip(提示工具) 提示工具在鼠标移动到指定元素后触发,可以在四个方位显示:头部显示.右边显示.左边显示.底部显示 一.基础提示框(Tooltip) 提示框在鼠标移动到指定元素上显示: ...

  6. Bootstrap-Plugin：提示工具（Tooltip）插件

    ylbtech-Bootstrap-Plugin:提示工具(Tooltip)插件 1.返回顶部 1. Bootstrap 提示工具(Tooltip)插件 当您想要描述一个链接的时候,提示工具(Tool ...

  7. CSS 笔记——导航栏、下拉菜单、提示工具

    8. 导航栏.下拉菜单.提示工具 (1)导航栏 垂直导航栏 <!DOCTYPE html> <html lang="en"> <head> &l ...

  8. Bootstrap 提示工具（Tooltip）插件

    一.提示工具(Tooltip)插件根据需求生成内容和标记,默认情况下是把提示工具(tooltip)放在它们的触发元素后面. 有以下两种方式添加提示工具(tooltip): 1.通过data属性:如需添 ...

  9. Bootstrap -- 插件: 提示工具、弹出框、 警告框消息

    Bootstrap -- 插件: 提示工具.弹出框. 警告框消息 1. 提示工具(Tooltip)插件:根据需求生成内容和标记. 使用提示工具: <!DOCTYPE html> <h ...

随机推荐

  1. （转）PAL制式和NTSC制式的区别

    转:https://www.cnblogs.com/nx520zj/articles/6061777.html 常见的电视信号制式是PAL和NTSC,另外还有SECAM等. NTSC即正交平衡调幅制. ...

  2. linux设备驱动第一篇：设备驱动程序简介

    首先,我们知道驱动是内核的一部分,那么驱动在内核中到底扮演了什么角色呢? 设备驱动程序在内核中的角色:他们是一个个独立的“黑盒子”,使某个特定的硬件响应一个定义良好的内部编程接口,这些接口完全隐藏了设 ...

  3. Codeforces Round #506 (Div. 3) E

    Codeforces Round #506 (Div. 3) E dfs+贪心 #include<bits/stdc++.h> using namespace std; typedef l ...

  4. 老牌激活工具– Microsoft Toolkit 2.4.3 + 详细图文教程【转】

    老牌激活工具-- Microsoft Toolkit 2.4.3 + 详细图文教程 windowsToolkit是一个一键激活MS Office 2010的工具.原理就是利用KMS来激活,不是新的激活 ...

  5. 阿里云使用ssl免费证书

    购买免费证书 购买之后 申请证书 该域名必须添加一条TXT记录 根据提示添加记录 下载证书 我用的nginx做的映射,所以下载nginx nginx安装自行百度 将下载的文件解压到nginx目录下(创 ...

  6. Python Django 编写一个简易的后台管理工具1-安装环境

    安装python环境 MAC 一般都会自带 Python2.x版本 的环境,你也可以在链接 https://www.python.org/downloads/mac-osx/ 上下载最新版安装. 安装 ...

  7. 显示等待WebDriverWait+EC

    参考:https://www.cnblogs.com/yoyoketang/p/6538505.html 百度搜索关键字,等待搜索结果页面显示完成后,验证搜索结果的第一条记录 通过WebDriverW ...

  8. delphi 在代码中 添加 TO-DO 并且 管理

    TO-DO List是一项非常好用的功能.采用她可以让我们很清楚的了解以前完成了那些任务,还有哪些任务需要做,由谁负责完成,是不是比较紧急的任务等.今天来不及完成的,明天上班就可以很快的找到任务所在的 ...

  9. Ionic4 入门

    1.搭建环境 1.电脑安装node.js,安装后电脑会自动安装npm     2.通过cmd命令,安装cnpm npm install -g cnpm -registry=https://regist ...

  10. webapi返回json格式优化 转载https://www.cnblogs.com/GarsonZhang/p/5322747.html

    一.设置webapi返回json格式 在App_Start下的WebApiConfig的注册函数Register中添加下面这代码 1 config.Formatters.Remove(config.F ...