通过CSS写提示工具栏的上下左右箭头

背景：现在很多提示工具栏都是组件库自带的，但是有些项目是通过原生js+jquery写的。这种项目就需要自己去写样式了

话不多说直接上代码：
1，剪头向下的

<!DOCTYPE html>
<html>
<style>
.tooltip {position: relative;display: inline-block;border-bottom: 1px dotted black;
}.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;top: 150%;left: 50%;margin-left: -60px;
}.tooltip .tooltiptext::after {content: "";position: absolute;bottom: 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;"><h1>下方工具提示 w/ 上箭头</h1><div class="tooltip">Hover over me<span class="tooltiptext">Tooltip text</span>
</div></body>
</html>

2，剪头朝上

.tooltip .tooltiptext::after {content: " ";position: absolute;bottom: 100%;  /* At the top of the tooltip */left: 50%;margin-left: -5px;border-width: 5px;border-style: solid;border-color: transparent transparent black transparent;
}

3，剪头向右

.tooltip .tooltiptext::after {content: " ";position: absolute;top: 50%;left: 100%; /* To the right of the tooltip */margin-top: -5px;border-width: 5px;border-style: solid;border-color: transparent transparent transparent black;
}

4，剪头向左

.tooltip .tooltiptext::after {content: " ";position: absolute;top: 50%;right: 100%; /* To the left of the tooltip */margin-top: -5px;border-width: 5px;border-style: solid;border-color: transparent black transparent transparent;
}

通过CSS写提示工具栏的上下左右箭头相关推荐

css 写一个向右的箭头
经常写移动端页面时会用到向右的箭头,之前都是用图片,突然想到用css应该也能写,于是一搜还确实有 width: 7px; height: 7px; border-top: 2px solid #fff ...
网页箭头特效：用CSS写的网页导航向上箭头
简介:css练习写的实现箭头的写法无标题文档
用 CSS 写一个向右的箭头
今天在修改别人写的网页的时候发现一个有意思的东西,就是一个向右的箭头,如图所示: 这个效果如果要我来写的话,我估计会直接弄一个图片放上去,但是我今天发现这玩意居然还能用 CSS 来写,让我眼前一亮,就 ...
用css写一个向下的箭头
在做项目过程中,为了将设计原型还原,有一些小的图形需要我们用代码写上去,尽量避免引用图片增大项目体积. <!DOCTYPE html> <html><head>&l ...
用css来实现上下左右箭头
<!DOCTYPE html> <html> <head> <style> i {/* 用border值来控制箭头粗细 */border: 3px so ...
html中怎么写小箭头,HTML+CSS入门 CSS用伪类制作小箭头
本篇教程介绍了HTML+CSS入门 CSS用伪类制作小箭头,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 本文对轮播图左右按钮的处理方法一改往常,不是简单地用btn.pr ...
前端使用CSS属性，使Div上下左右移动指定像素
前言前端使用CSS属性,使Div上下左右移动指定像素前端的Css属性真的太多了,很不容易记下,所以写一篇博客记录,加深记忆. 需求上面是美工出的图大概就是2个横着排列的div和分页器居中对齐 ...
纯css写单选框和复选框的样式和功能
只用纯css写的单选框和复选框的样式和功能该怎么写?看这里,复制下面的代码运行一遍就知道了,快试试吧! 效果截图: <!doctype html> <html lang=" ...
css写出三角形（兼容IE）
利用css写三角形,兼容IE7 .arrow-up { width:0px; height:0px; border-left:10px solid transparent; border-right: ...

通过CSS写提示工具栏的上下左右箭头

通过CSS写提示工具栏的上下左右箭头相关推荐

最新文章

热门文章