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. UOJ 418 【集训队作业2018】三角形——思路+线段树合并

    题目:http://uoj.ac/problem/418 看了题解才会…… 很好的想法是把整个过程看成若干 “取一点 i ,值+=w[ i ],值-=\(\sum w[j]\)”(其中 j 是 i 的 ...

  2. jenkins-参数化构建插件：Choice Parameter

    参考: 谢谢大佬的总结: https://www.cnblogs.com/zhaojingyu/p/9862371.html 使用方式 step1: 添加参数,选择Choice Parameter,并 ...

  3. HTMLTestRunner优化：带截图、饼图、失败重跑

    github地址:https://github.com/yoyoketang/sele_project_th9

  4. 【python】 读写文件

    #标准输出 sys.stdout.write() sys.stderr.write() #标准输入 while True : try: line = raw_input().rstrip(); exc ...

  5. （转）微信调用扫码和支付功能是都报错 the permission value is offline verifying

    原文地址:https://blog.csdn.net/qq_34794885/article/details/98504970

  6. VB － 循环

    循环控制语句有for……next循环.for……each循环.do……while循环.do……until循环.while循环五种形式. 1. 在使用循环控制语句前,首先要对循环条件进行判断,如果循环次 ...

  7. select下拉框选中其中一个值

    function LoadList123() { var param = { action: "SelectShopType1"};//参数拼接 var Resultstr = & ...

  8. Linux系统ubuntu17安装jdk8并配置环境变量

    上班多年,一直没有真正在Linux下开发过,没有捣鼓到Linux服务器,成为憾事.最近由于想学习Python,于是开始看书,学习Linux,学习shell编程. 选择Linux,先从最简单的ubunt ...

  9. Cocos2d 之FlyBird开发---MainMenu类

    |   版权声明:本文为博主原创文章,未经博主允许不得转载. MainMenu类主要实现的是游戏主界面的布局,它相当于一个港口,有开向各处的航道,而游戏中的MainMenu则是有跳转到各个场景的一个集 ...

  10. js 模拟window.open 打开新窗口

    为什么要去模拟window.open() 打开一个 新的窗口呢,因为有些浏览器默认会拦截 window.open, 当需要函数中打开新窗口时,接可以使用a标签去模拟打开. /** * a模拟windo ...