轻量级 css3 tooltips 信息提示框

最新推荐文章于 2024-05-26 10:00:26 发布
最新推荐文章于 2024-05-26 10:00:26 发布
阅读量231 收藏
点赞数
分类专栏： css web前端 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tomhat/article/details/84604533
版权
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Html</title>
<style type="text/css">
.tooltip {
position: relative;
/* background: #eaeaea; */
cursor: default;
display: inline-block;
text-decoration: none;
color: #222;
outline: none;
top:100px;
left:200px;
}

.tooltip span {
visibility: hidden;
position: absolute;
bottom: 30px;
left: 45%;
z-index: 999;
width: 100%;
margin-left: -55%;
padding: 10px;
border: 2px solid #ccc;
opacity: .9;
background-color: #ddd;
background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

.tooltip:hover {
border: 0; /* IE6 fix */
}

.tooltip:hover span {
visibility: visible;
}

.tooltip span:before,.tooltip span:after {
content: "";
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;
border-top: 8px solid #ddd;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
}

.tooltip span:before {
border-top-color: #ccc;
bottom: -8px;
}
.tooltip span:after {
border-top-color: #ccc;
bottom: -8px;
}
</style>

</head>
<body>
<div class="tooltip">这是我的文字<span>这是我的说明描述文字。</span></div>
</body>
</html>
tomhat
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3 Tooltips
12-27
css3 tooltips鼠标悬停显示消息提示框样式。完整的代码，方便学习。
纯js轻量级tooltips工具提示插件
12-11
html5tooltipsjs是一款使用纯javacript编写的轻量级tooltips工具提示插件。该tooltips插件不依赖任何框架，内容可带HTML标签，并可以使用预设的CSS3动画来制作tooltips动画效果。
CSS3实现漂亮ToolTips
azwayqtzz467135455的博客
04-02 179
演示Demo 5种效果的主要css如下： /* transform:向元素应用2D或3D转换; transform-origin属性只有在定义了transform以后才生效 */ .tooltip-effect-1 .tooltip-content{ -webkit-transform:translate3d(0,10px,0) rotate3d(1,1...
tooltips - 精巧纯粹的CSS工具提示库
最新发布
gitblog_00040的博客
05-26 211
tooltips - 精巧纯粹的CSS工具提示库 项目地址:https://gitcode.com/xurui3762791/tooltips 项目介绍 tooltips是一个轻量级的CSS工具提示库，专为那些追求简洁高效用户体验的开发者设计。该项目由xurui3762791开发，并以MIT许可证开源。它提供了一种优雅的方式来展示各种类型的提示信息，包括上、下、左、右等方向，以及不同大小和颜色的主...
纯CSS Tooltips..
weixin_34315665的博客
05-25 95
      什么是Tootips? 这就是Tooltips如你所见，这些附加的说明文字在鼠标经过的时候显示。       当然,支持HTML.如:       . &lt;html&gt;       &lt;head&gt;       &lt;/head&gt;       &lt;style type="text/css"&gt;         /*T...
纯CSS Tooltips
goodyatou的专栏
06-01 321
<br /><br /><br /><br /><a class="tooltips" href="#tooltips">这就是Tooltips<span>如你所见，这些附加的说明文字在鼠标经过的时候显示。</span></a><br /><style type="text/css"><br />/*Tooltips*/<br />.tooltips{<br />position:relative; /*这个是关键*/<br />z-index:2;<br />}<br />.tooltips:hover{
利用css和＜span＞标签实现tooltips
Julienling的博客
04-19 544
css .ChkBxTooltip { color: red; position: relative; z-index: 1; } .ChkBxTooltip span { display: none; } .ChkBxTooltip:hover { z-index: 2; } .ChkBxTooltip:hover span { margin-top: 4px; display: block; position:absolute;
ToolTips JQEURY插件之简洁小提示框效果
09-05
因此，他决定编写一个轻量级的自定义插件，以满足显示基本提示信息的需求。这个插件的设计目标是鼠标移到文字上方时，自动弹出一个提示框显示相关信息。 ### 实现效果 该插件的实现效果相当直观：当用户将鼠标悬停...
js 提示框插件鼠标滑过提示文章内容信息
09-26
JavaScript提示框插件是一种常用的网页交互元素，它能够在鼠标悬停在特定元素上时，以弹出的小窗口显示额外的信息。这种插件通常被称为“tooltips”，它可以帮助用户了解页面上某些元素的具体含义或详细内容，而无需...
jQuery Tooltips悬停提示效果特效代码
03-20
- jQuery Tooltipster是一个轻量级、高度可定制的jQuery插件，它允许开发者创建各种样式和动画效果的工具提示。 - 插件支持多种主题和样式，可以通过CSS轻松定制，以适应不同的网页设计风格。 - Tooltipster提供...
css3神奇tooltips提示框动画
12-13
这是一款使用css3 transitions和伪元素制作的效果非常神奇的tooltips提示框动画效果。各种tooltips有气泡放大效果、旋转效果和滑动效果等等。
tootik-纯CSS Tooltips工具提示特效库
12-13
tootik是一款纯CSS Tooltips工具提示特效库。该工具提示效果使用CSS3/SASS来制作，支持使用data属性来配置tooltips的位置和属性，效果非常炫酷。
纯CSS实现一个漂亮的ToolTips效果（导航栏气泡特效）
AMAZING
11-21 3253
纯CSS实现一个漂亮的ToolTips效果（导航栏气泡特效）
CSS3实现漂亮ToolTips效果
AC_great的专栏
03-25 1804
(1)<meta name="viewport" content="width=device-width" initial-scale="1" 移动端页面，让你的页面宽度强制去适应你的设备宽，初始化的缩放比例为1 (2)<meta http-equiv="X-UA-compatible" content="IE=edge" 使IE采用最新的渲染模式 (3)特效：-webkit-tran
纯CSSTooltips
zgqtxwd的专栏
04-30 371
<!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--><script type="text/javascript"
CSS 提示工具：Tooltip
梁辰兴的博客
09-20 1637
基础提示框（Tooltip）是一种常见的用户界面元素，通常用于向用户显示有用的信息或提示。在这个示例中，创建了一个带有 “Hover Me” 文本的按钮，当鼠标悬停在按钮上时，会显示一个位于按钮下方的提示框。CSS 提示工具是一种常用的用户界面元素，通常用于向用户显示有用的信息或提示。在CSS中，我们可以创建基于定位的提示工具，这通常涉及到使用绝对定位来放置提示框，以便使其正确地出现在鼠标指针下方。同时，还使用CSS来设置提示框的样式，包括位置、背景色、字体颜色、边框圆角等。来触发提示框的显示。
css基础 CSS 提示工具(Tooltip)
wgchen
04-27 1723
阅读目录CSS 提示工具(Tooltip)基础提示框(Tooltip)实例解析定位提示工具添加箭头实例解析淡入效果 CSS 提示工具(Tooltip) 本文我们为大家介绍如何使用 HTML 与 CSS 来创建提示工具。 基础提示框(Tooltip) 提示框在鼠标移动到指定元素上显示： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>下拉菜单</title
Pxmu - 超轻量消息框js插件
qq_34304065的博客
06-05 915
Pxmu.js 是移动端轻量消息提示框插件； Pxmu的特点： ·超轻量 ·
html tooltips效果,div+css样式自制带小三角的tooltips效果
weixin_36040903的博客
06-04 199
代码和效果图如下：.tooltips {position: relative;width: 300px;height: 80px;line-height: 60px;background: #D7E7FC;border-radius: 4px;}.arrow {position: absolute;color: #D7E7FC;width: 0px;height: 0px;line-height:...
layui tooltips
04-14
4. 支持多种位置：tooltips 组件支持在目标元素的上方、下方、左侧和右侧等位置显示提示框，可以根据实际情况选择合适的位置。 5. 支持HTML内容：tooltips 组件支持在提示框中显示 HTML 内容，可以实现更加丰富的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值