手把手教你用原生js写一个文字提示框

先上效果图：

其实文字提示框可以看做是一个三角形和长方形的组合，当文字提示框在下方弹出时，三角形在上，长方形在下，然后给长方形的边框设置一定的弧度，从而整个文字提示框看起来就很自然啦~

然后设置为当鼠标移至按钮时气泡显示，移出按钮时气泡隐藏，这样就可以很自如的切换气泡的显示和隐藏效果啦~

源代码如下：

<!DOCTYPE html>
<html lang="en">
<head><title>Tooltips悬停文字提示框效果</title><meta charset="utf-8"/>
</head>
<body>
<div class="tooltip"><div class="tooltipButton" type="button" onmouseover="showTips()" onmouseout="hideTips()">button</div><div class="tooltip-one"></div><div class="tooltip-two">文章转PDF</div>
</div>
<style>.tooltipButton {height: 32px;width: 100px;background-color: whitesmoke;text-align: center;align-items: center;border: 1px solid;border-radius: 15px;padding-top: 10px;font-size: 16px;}.tooltip {position: fixed;top: 100px;left: 100px;align-items: center;}.tooltip-one {display: none;width: 0;height: 0;border-left: 3px solid transparent;border-bottom: 6px solid black;border-right: 3px solid transparent;margin-left: 35px;}.tooltip-two {display: none;background-color: black;color: white;font-size: 13px;width: 70px;height: 20px;text-align: center;border-radius: 5px;padding: 6px;margin-top: 0px;}
</style>
<script type="text/javascript">var buttonOne = document.getElementsByClassName("tooltip-one")[0];var buttonTwo = document.getElementsByClassName("tooltip-two")[0];function showTips() {//显示文字提示框buttonOne.style.setProperty('display', 'block');buttonTwo.style.setProperty('display', 'block');console.log("1");}function hideTips() {//隐藏文字提示框buttonOne.style.setProperty('display', 'none');buttonTwo.style.setProperty('display', 'none');console.log("2");}
</script>
</body>
</html>

对于文字提示框在左边显示、右边显示还有上边显示都是一样的套路，主要区别就是三角形和长方形的摆放位置，其余都是类似的做法~

手把手教你用原生js写一个文字提示框相关推荐

用原生js写一个微博发布框，留言框。
本来这篇文章是昨晚发布的,但是昨天网上自己的网站出了一些问题. 百度一下可能是因为配置的问题,但是自己对后端,以及命令行实在不懂.好吧那就把它先放着.等我学了php以及linux在回来解决吧. 今天写 ...
HTML+CSS+原生JS写一个简易的音乐播放器（仅播放一首歌）
用HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌) 效果如下:(鼠标点击按钮可以实现播放或暂停,按钮会旋转,实现了歌词同步,功能还需改进) 代码如下: <!DOCTYPE htm ...
js 取得input绑定的datalist中的值_原生JS写一个ToDo Demo
周六加班没什么事,于是乎...上班摸鱼,用原生JS写了一个ToDo Demo,废话少叙,直接看效果: 如图,实现了以下需求(以下的具体实现我会一一道来): 0.页面的基本布局: 1.rem布局.在不同 ...
原生js的图片.文字.小框的跑马灯效果及弹幕效果
笔者在最近的一个点上项目中使用原生js遇到一个跑马灯效果,需要图片循环播放,可以根据图片的多少改变一定的样式,从而实现跑马灯效果.于是把图片的,文字的和另一种小框的都整合了一下,顺便基于小框的跑马灯增 ...
手把手教你：CSS+JS 打造一个有个性的滚动条
前言每次浏览网页的时候,有个东西必不可少,那就是滚动条.这时候有的同学可能会说了:这句话不对,有的网页看不到滚动条.其实吧,那并不是看不到滚动条,而是滚动条被隐藏起来了.我们反过来想想,如果没有滚动 ...
vue如何使用原生js写动画效果_原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
用原生JS写一个网页版的2048小游戏（兼容移动端）
这个游戏JS部分全都是用原生JS代码写的,加有少量的CSS3动画,并简单的兼容了一下移动端. 先看一下在线的demo:https://yuan-yiming.github.io/2048-online ...
html怎么引轮播图插件,原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
js 写html代码编辑器,原生JS写一个功能强大的编辑器
因为一个同学,要做一个能加入图片的留言板功能,类型与QQ空间留言板和百度贴吧发帖的那种形式,同时在网上找了找发生网上对这方面的交流很少,所以发表这篇文章抛砖引玉,希望能帮助广大的学习者,也同时希望大佬 ...
JS：原生JS实现message消息提示框
简介学习了一下如何使用原生JS(加上class类)实现message消息提示框的封装(繁琐版). 使用到的主要技术点:class类,JS. 功能点 1.四种提示状态(message success ...

手把手教你用原生js写一个文字提示框

手把手教你用原生js写一个文字提示框相关推荐

最新文章

热门文章