【css】添加待小三角的提示框

最新推荐文章于 2024-03-06 14:35:29 发布
最新推荐文章于 2024-03-06 14:35:29 发布
阅读量542 收藏 1
点赞数
分类专栏： 前端 文章标签： css javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22744093/article/details/132201907
版权

如需创建在工具提示的指定侧面显示的箭头，在工具提示后添加“空的”内容，并使用伪元素类 ::after 和 content 属性。箭头本身是使用边框创建的。这会使工具提示看起来像气泡。
在这里插入图片描述
代码：

<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  margin-top: 100px;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip .tooltiptext::after {//设置小三角样式
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<div class="tooltip">悬浮提示，悬浮一下
  <span class="tooltiptext">提示语</span>
</div>

</body>

渲染效果：

在这里插入图片描述

科学熊
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
DIV+CSS实现带三角箭头的提示框
09-27
本文给大家带来一段代码基于div+css实现三角形提示框，代码简单易懂，需要的朋友可以参考下
怎么用纯CSS制作带小三角的tooltip提示框
01-19
首先附上效果图： 以上的效果完全是用 css 来实现的，那么是怎么实现的呢？ 我们知道 html 中有一些特殊的字符，具体的请点击 HTML特殊字符大全。 通过特殊字符，利用 css 中的 margin 或者 position 方法完全可以实现以上效果。  复制代码代码如下: <!DOCTYPE HTML> <html lang=”en-US”> <head> <meta charset=”UTF-8″> <title>字符制作三角边框</title> <style type=”text/css”> *{margin:0;padding:0;} body{font-family:SimSun
css使用伪元素绘制带三角箭头的提示框
最新发布
林啾啾的博客
03-06 632
css使用伪元素绘制带三角箭头的提示框
纯css三角提示框
08-27
纯js css带三角的提示框，可自动定位，可强制设置弹出方向及对其方式。通过chrome/FF/IE7测试
利用CSS伪元素创建带三角形的提示框的实现方法
09-24
下面小编就为大家带来一篇利用CSS伪元素创建带三角形的提示框的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
带小三角的提示框
u010705091的专栏
02-16 1001
html> html> head> title>title> meta http-equiv="Content-Type" content="text/html;charset=utf-8"> style> .demo{ margin-top:100px; /*width:200px; height:2
css写提示框（带小三角样式的）
zhangxy
01-09 4439
第一种写法： &lt;style type="text/css"&gt; /**样式**/ .tooltip-boxs{ margin-top: 10px; width:180px; background: #666; border-radius: 8px; text-align:center; padding: 15px 1px; } .tooltip-boxs:after{ content...
纯CSS实现带小三角提示框
ztnhnr的专栏
08-03 4386
要实现在页面上点击指定元素时，弹出一个信息提示框。在前面的文章中，我们已经简单介绍了如何使用纯 CSS 创建一个三角形。本文在此基础上，记录如何使用 CSS 创建带三角形的提示框。 实现的原理是创建一个div提示框，然后再创建一个三角形，将三角形用绝对定位（absolute）到提示框对应的位置。 一、创建不带边框的提示框： 之前已介绍过怎么生成三角形，直接代码如下： <style> body{ margin:0; ...
【css】画提示框三角形
qq_43095183的博客
11-17 242
css画提示框三角形
不同样式tooltip对话框小三角的css实现
祈澈菇凉
08-19 959
开发过程中已经遇到过好多次需要手动实现 tooltip 样式了，这里就总结下，以便未来更好的复制粘贴。如上图，常见的 tooltip 总共有 3 种类型，纯背景色无边框、有边框、包含背景图...
css制作tips提示框，气泡框，制作三角形的实现
09-22
有时候我们的页面会需要这样的一些提示框或者叫气泡框，这篇文章主要介绍了css制作tips提示框，气泡框，制作三角形的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
【前端】CSS中小三角做法
分享记录开发中的问题，欢迎一起探讨！
12-07 604
有时候我们需要像电商网站上鼠标移入后，弹窗的顶部有一块小三角。 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .root{ width: 10px; height: 10px;
用CSS制作小三角提示符号
weixin_30437337的博客
09-11 66
今天在项目中遇到了如下图的切图要求。 对，重点就是那个小三角提示符号。 html 结构如下 1 <div class="wrap"> 2 <div class="up-arr1"></div> 3 <div class="up-arr2"></div> 4 <...
HTTP请求超时：问题、原因与解决方案
qq_22744093的博客
08-30 6873
重新设置请求头：在发送HTTP请求时，可以修改请求头中的一些字段，以减少HTTP请求的次数。通过设置请求超时阈值、限制请求速度、重新设置请求头、加强网络安全等措施，可以有效降低HTTP请求超时的发生概率。其他可能的解决方案：如使用CDN加速、优化数据库查询等，都可以有效提高请求响应速度，减少超时的发生。设置请求超时阈值：在发送请求前，先设置一个合理的超时时间，以避免长时间等待无响应的请求。重新设置请求头：通过优化请求头，减少HTTP请求的次数，提高请求的效率。
wepy项目小程序开发工具打开报TypeError: Cannot read property ‘mark‘ of undefined
qq_22744093的博客
12-04 5380
wepy项目：将git代码拉去下来，npm run dev，结果报一堆格式错误，将wepy.config.js中的module.exports = { wpyExt: '.wpy', eslint: true, cliLogs: !prod,改为eslint: false，然后世界清静很多。看到eslint就烦。接着用小程序工具打开，报TypeError: Cannot read property ‘mark’ of undefined，接着各种排查，各种对比，头皮发麻。最终发现是小程序工具设置问题： .
npm install报 ERESOLVE unable to resolve dependency tree
qq_22744093的博客
11-02 2696
都一切顺利，现在就不行，那很大的可能是npm的版本不同。三四年前的一个项目，打开，
js实现自动执行函数
qq_22744093的博客
06-09 2528
1、setInterval 间隔一段时间执行函数，执行多次（一直执行） js代码： //setInterval方法或字符串 ，毫秒，参数数组（方法的）) setInterval(“showLogin()”,“1000”);//showLogin()函数名一定要带括号2.setTimeout 延迟执行函数，只执行一次 setTimeout 在执行时,它从载入后,每隔指定的时间就执行一次表达式 js代码：...
【css】css设置表格样式-边框线合并
qq_22744093的博客
08-02 2195
渲染出来的效果不好看，边框线存在两条，现在需要将它们合并，添加 border-collapse: collapse。
css气泡框三角形
06-01
要实现一个带有三角形箭头的气泡框，可以使用 CSS 的 ::before 和 ::after 伪元素，同时利用 CSS 的 border 属性和 transform 属性进行样式的定制。 下面是一个简单的示例代码，可以作为参考： ```html <div class="bubble"> <p>这是一个带有三角形箭头的气泡框。</p> </div> ``` ```css .bubble { position: relative; background-color: #f1f1f1; border-radius: 10px; padding: 10px; margin: 50px; text-align: center; } .bubble::before, .bubble::after { content: ""; position: absolute; border-style: solid; border-width: 10px; width: 0; height: 0; } .bubble::before { top: -20px; left: 50%; border-color: transparent transparent #f1f1f1 transparent; transform: translateX(-50%); } .bubble::after { top: -18px; left: 50%; border-color: transparent transparent #fff transparent; transform: translateX(-50%); } ``` 在上面的代码中，我们首先定义了一个 .bubble 类作为气泡框的基础样式，包括了背景色、圆角、内边距和外边距等属性。 接着，我们使用 ::before 和 ::after 伪元素分别创建了一个三角形箭头和一个白色的三角形箭头，通过设置它们的 position 属性为 absolute，使它们位于气泡框的上方。 为了实现三角形形状，我们设置了 border-style 为 solid，border-width 为 10px，同时将宽度和高度设置为 0，这样就创建了一个边框宽度为 10px 的三角形。 最后，我们通过设置 border-color 和 transform 属性，对三角形箭头的样式进行了定制，使其与气泡框相匹配。 以上是一个简单的示例代码，可以根据实际需要进行进一步的样式调整和优化。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

科学熊

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值