纯CSS的Tooltip消息提示

来源:https://www.sucaihuo.com/js/1981.html 2017-05-19 23:50浏览(1875) 收藏

一款非常简单的消息提示功能,用纯CSS写的Tooltip,鼠标悬停在不同按钮时,会从不同的方位滑入相应的提示,提示内容、颜色、字体等均可自由调整。
纯CSS的Tooltip消息提示
分类:文字特效 > 提示文字 难易:入门级
查看演示 下载资源 下载积分: 20 积分

head部分仅需引入一个CSS样式即可:

<link type="text/css" rel="stylesheet" href="css/style.css">

body部分写好提示内容,注意flow的方向,每个方向对应CSS里面不同的样式:

<main>
    <div>
      <span tooltip="从上面滑入提示信息!" flow="up">上面滑入提示</span>
    </div>
    <div>
      <span tooltip="从左侧滑入提示信息!" flow="left">左侧滑入提示</span>
      <span tooltip="从右侧滑入提示信息!" flow="right">右侧滑入提示</span>
    </div>
    <div>
      <span tooltip="从下面滑入提示信息!" flow="down">下面滑入提示</span>
    </div>
  </main>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2