一、介绍before/after

CSS中的before和after伪类选择器早在CSS2时就被引入，改属性被所有主流浏览器所支持了。
before和after顾名思义，分别指的是伪元素在元素前/后添加内容，默认他们是display是inline，但是可以使用CSS设置为block。
应用before/和after也比较简单，举个例子：

a:after {

      content: " after ";

      display:  block;

      coloe: red;

}

可以在浏览器看到，a标签元素后面多出了一段文字 after。（在CSS3中伪类元素使用是如a::after的，不过目前两者并无多大区别）。
（伪元素不可通过DOM使用，IE6/7对该属性不支持）

after和before伪元素有许多用处，还可以简化代码，比如可以写一个计数器、tip小三角形、清除浮动……特别在CSS3中新加的一些属性更是丰富了它的应用，这里有个小教程，用before/after伪元素来实现一个纯CSS3的tooltip。

二、tooltip实现教程

demo:https://hwlv.github.io/fullpage/test/after.html

这里我们主要是用草after/before伪元素content中的attr属性，先来看看实现后的样子：

1.实现样式

2.代码

鼠标hover button之后，出现一个tooltip小标签。
代码先贴上：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>demo</title>

    <style>

        .btn {

            position: relative;

            display: block;

            margin: 200px auto;

            width: 200px;

            padding: 10px 20px;

            font-size: 20px;

            background: #fff;

            color: #6bdf4e;

            border: 1px solid #6bdf4e;

            cursor: pointer;

        }

        .btn::after {

            content: attr(data-tip);

            display: none;

            position: absolute;

            padding: 5px 10px;

            left: 50%;

            bottom: 100%;

            margin-bottom: 12px;

            transform: translateX(-50%);

            font-size: 16px;

            background: #000;

            color: #fff;

            cursor: default;

        }

        .btn::before {

            content: " ";

            position: absolute;

            display: none;

            left: 50%;

            bottom: 100%;

            transform: translateX(-50%);

            margin-bottom: 3px;

            width: 0;

            height: 0;

            border-left: 6px solid transparent;

            border-right: 6px solid transparent;

            border-top: 9px solid #000;

        }

        .btn:hover::after,

        .btn:hover::before {

            display: block;

        }

    </style>

</head>

<body>

    <button class="btn" data-tip="ToolTip">button</button>

</body>

</html>

3.实现过程

  • 一. 创建一个标签，然后在标签内加上一个属性 data-[] = “ToolTip”,[]表示的是自定义的属性名称，引号里面是tooltip需要显示的内容。
  • 二. 给标签加样式，position设置为relative，因为之后伪元素需要设置绝对定位来设置位置。
  • 三. 给after加样式，after是需要显示的tooltip，通过content: attr(data-tip);拿到需要显示的内容，设置绝对定位，调整位置。
  • 四. 给before加样式，before需要设置成一个小三角tip放在after下面。
  • 五. 给after/before的display都设置为none。
  • 六. 给需要tooltip的元素伪类选择hover时设置after/before的display为block，这里需要注意的是after/before默认display为inline，所以我们前面创建调试是display应该先设置为block。
  • 七. 打开浏览器查看效果

html tip实现的更多相关文章

  1. 项目经理排期的几个tip

    互联网敏捷开发的流程可以演绎出很多玩法,但最好都遵循以下几个tip: 1, 对项目经理最重要的一条是,通读所有需求文档,跟相关PM进行彻底沟通,把需求都搞熟搞透,防止漏排任务: 2, Stroy拆分要 ...

  2. 基于1.3.3版本tooltip的datagrid单元格tip实现

    基于1.3.3版本tooltip的datagrid单元格tip实现 2013年05月25日 ⁄ datagrid ⁄ 共 6122字 ⁄ 评论数 26 ⁄ 被围观 7,033 views+ 文章目录 ...

  3. Windows Universal 应用 – Tip Calculator

    声明 以下内容取材于 Bob Tabor 的课程<Windows Phone 8.1 Development for Absolute Beginners>,链接地址为:http://ww ...

  4. 2015.5.2-2015.5.8 Tip jQuery ，前端组件库，inline-block元素间距等

    有忙于它事,故延迟了,但在坚持! 1.Tip jQuery   2.给span加display: inline-block; 怎样能对齐? 解决方法:vertical-align: bottom:   ...

  5. 封装tip控件

    在界面上有时需要显示一个提示,大多的前端框架都把提示做成一个带有小尖角的提示框,因此自己也仿照了实现了一下,效果图如下: 尖角的实现很简单的,一般都是通过css将div的宽高设置为0,然后将尖角朝向的 ...

  6. 实现tip浮层

    实现简单的tip浮层: html代码: <!doctype html> <html> <head> <meta charset="utf-8&quo ...

  7. [js开源组件开发]tip提示组件

    tip提示组件 常见的应用场景中,总是难免会遇到提示信息,比如显示不完全时需要鼠标移上去显示title,比如验证时的错误提示,比如操作按钮的辅助说明等,所以我独立出来了一个小的js组件,tip提示组件 ...

  8. Java程序性能优化Tip

    本博客是阅读<java time and space performance tips>这本小书后整理的读书笔记性质博客,增加了几个测试代码,代码可以在此下载:java时空间性能优化测试代 ...

  9. Ext.js中的tip事件实际使用

    Ext.onReady(function () { // Init the singleton. Any tag-based quick tips will start working. Ext.ti ...

  10. 关于iChartjs在移动端提示框tip显示不正常的解决方法

    最近项目需要使用手机图表,但是找了很久都没找到专门为移动端开发的图表,只能找一些能兼容移动端的图表控件,今天就讲讲关于iChartjs这个图形库的一点问题. 问题 iChartjs的提示框tip的显示 ...

随机推荐

  1. 关于read的例子和条件测试

    1.关于read比较两个的大小 #!/bin/sh read -t -p "please input two num:" a b if [ $a -gt $b ]; then ec ...

  2. jQuery DOM对象区别与联系

    对两种对象类型的定义,只要能理解并转换成自己的说法就可以,不用死板按照资料所写 jQuery对象(jq对象)其实就是通过jquery类库选择器获得的对象(或者说是通过$获取的对象或者说是通过jquer ...

  3. DeepLearning.ai学习笔记（一）神经网络和深度学习--Week3浅层神经网络

    介绍 DeepLearning课程总共五大章节,该系列笔记将按照课程安排进行记录. 另外第一章的前两周的课程在之前的Andrew Ng机器学习课程笔记(博客园)&Andrew Ng机器学习课程 ...

  4. Stream-快速入门Stream编程

    1.什么是流 Stream 不是集合元素,它不是数据结构并不保存数据,它是有关算法和计算的,它更像一个高级版本的 Iterator.原始版本的 Iterator,用户只能显式地一个一个遍历元素并对其执 ...

  5. ASP.NET MVC5+EF6+EasyUI 后台管理系统（86）-日程管理-fullcalendar插件用法

    前言 本文分享fullcalendar用法,最后面提供代码下载 说到日程管理,基于JQuery的插件FullCalendar当之无愧,完整的API稳定和调用方式,非常易于扩展!可以用于系统的个人历程管 ...

  6. TC358749XBG：HDMI转MIPI CSI芯片简介

    TC358749XBG是一颗HDMI转MIPI CSI功能的视频转换芯片,分辨率:1920*1080,电源3.3/1.8/1.2,通信方式:IIC,封装形式BGA80

  7. 多路复用（select、epoll）实现tcp服务

    -------------------------------多路复用的服务器(select)------------------------------- 网络通信被Unix系统抽象为文件的读写,通 ...

  8. Info模式下的隐形杀手(SpringMVC同时使用<mvc:resources.../>和FormattingConversionServiceFactoryBean时出现的问题)

    天气一天比一天变的凉快了,而我一天天踩的坑更加贱了,首先在北京向各位问好,也给身边献身教育事业的亲朋好友们补上一句节日快乐! 今天早上手贱把项目误删了,不得不去SVN上去乞求了.我个人习惯项目运行的时 ...

  9. poj 3522 Kruskal

    题意:求图的一个生成树使其最大边权与最小边权的差值最小,求其最小值 思路:利用贪心思想,先对边进行排序,然后从最小边开始枚举,每次进行kruskal向右加入边,若加入边刚好能遍历所有点,记录最后加入的 ...

  10. Push or Pull?

    采用Pull模型还是Push模型是很多中间件都会面临的一个问题.消息中间件.配置管理中心等都会需要考虑Client和Server之间的交互采用哪种模型: 服务端主动推送数据给客户端? 客户端主动从服务 ...