关于tooltips的demo

tooltips的demo
这里写图片描述
这是我demo的截图
先说一下功能:
第一:
当输入tips时,给这个小麦色的块的所有提示添加文字,虽然隐藏了,但是还是会添加进去。
第二:
点击上下左右就可以看到tip的效果。
第三:
点击取消,tip自动设置会清空,且,所有tips会隐藏。

中间遇到的问题:
第一个是span不知道为什么遇到中文会自动换行,自己再去想做个demo的时候又不行了。
第二个是伪类的定位问题,我在写样式的时候,用了:before这个伪类,但是当时定位让人很难受,

解决第一个问题:
先让他转换成内联块或者块
word-wrap:break-word;
内容将在边界内换行,仅用于块对象,内联对象要用的话,必须要设定height、width或display:block或position:absolute。

word-break:break-all;
用于处理单词折断。(注意与第一个属性的对比)

这样还不行,还的设置一个white-space 属性
white-space:normal;
属性设置如何处理元素内的空白。
normal: 默认。空白会被浏览器忽略。

额。。如果大家遇到那就问下度娘吧。。

感觉自己的js代码写的很low,也没太优化,就是记录下,如果想要参考或者看效果那就点上面链接,,找下源码
奥对,还有一个东西那就是用伪类做那个tip的凸出来的角角看下下面的css样式把~~ 去上课啦

//HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tooltips的测试demo</title>
   <link href="demo1.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="one">
    <div class="header"></div>
    <input type="text" placeholder="请输入tips" id="tips"/>
    <div class="box">
        <span class="tooltip bottomTips">我是tips</span>
        <span class="tooltip leftTips">我是tips</span>
        <span class="tooltip rightTips">我是tips</span>
        <span class="tooltip topTips">我是tips</span>
    </div>
</div>
<div class="two">
    <input type="button" value="bottom" id="bottom"/>
    <input type="button" value="left" id="left"/>
    <input type="button" value="right" id="right"/>
    <input type="button" value="top" id="top"/>
</div>
<input type="button" value="取消" id="hidden"/>
<script src="demo1.js"></script>
</body>
</html>

//CSS
.header{
    width:100%;
    height:100px;
    background-color: hotpink;
}
.one input{
    width:100%;
    height:50px;
    background-color: #eee;
    margin-top:15px;
    text-align: center;
}
.box{
    width:150px;
    height:150px;
    background-color: wheat;
    margin: 100px auto;
    position: relative;
}
.tooltip{
    display: inline-block;
    position:absolute;
    font-size:15px;
    background-color: pink;
    word-wrap:break-word;
    white-space:normal;
    width:100%;
}
.bottomTips{
    bottom:-30%;
    left:30%;
    display: none;
}
.topTips{
    top:-30%;
    left:30%;
    display: none;
}
.leftTips{
    right:200%;
    top:30%;
    display: none;
}
.rightTips{
    left:200%;
    top:30%;
    display: none;
}
.bottomTips:before{
    content: '';
    border-bottom:5px solid pink;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-top:5px solid transparent;
    position:absolute;
    left:30%;
    bottom:100%;
}
.topTips:before{
    content: '';
    border-bottom:5px solid transparent;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-top:5px solid pink;
    position:absolute;
    left:30%;
    top:100%;
}
.leftTips:before{
    content: '';
    border-bottom:10px solid transparent;
    border-left:10px solid pink;
    border-right:10px solid transparent;
    border-top:10px solid transparent;
    position:absolute;
    left:100%;
    top:10%;
}
.rightTips:before{
    content: '';
    border-bottom:10px solid transparent;
    border-left:10px solid transparent;
    border-right:10px solid pink;
    border-top:10px solid transparent;
    position:absolute;
    right:100%;
    top:10%;
}
.two input{
    width:20%;
    height:25px;
}
#hidden{
    margin-top:20px;
    width:20%;
}

//js
var tool1=document.querySelector("#left");
var tool2=document.querySelector("#right");
var tool3=document.querySelector("#top");
var tool4=document.querySelector("#bottom");
var hidden=document.querySelector("#hidden");
var tip=document.querySelector("#tips");
tip.onkeydown=function(ev){
    var tips=document.querySelector(".box").querySelectorAll("span");
    var val=tip.value;
    if(ev.keyCode=='13'){
        for(var i=0;i<tips.length;i++){
            tips[i].innerHTML=val;
        }
    }
}
function display(tips){
    var directionTips=document.querySelector(tips);
    directionTips.style.display="block";
}
tool1.onclick=function(){
    display(".leftTips");
};
tool2.onclick=function(){
    display(".rightTips");
};
tool3.onclick=function(){
    display(".topTips");
};
tool4.onclick=function(){
    display(".bottomTips");
};
hidden.onclick=function(){
    var tips=document.querySelector(".box").querySelectorAll("span");
    for(var i=0;i<tips.length;i++){
        tips[i].style.display="none";
        tips[i].innerHTML="我是tips";
        tip.value="";
    }
}
阅读更多

没有更多推荐了,返回首页