CSS 提示工具(Tooltip)

ACb0y 发布于2019-08-30 15:54 / 2364人阅读

摘要：本文的内容为使用与来创建提示工具，提示工具在鼠标移动到指定元素后触发。这个提示工具可以使我们排出的网页增加美感，也可以提升用户的可读性。

本文的内容为使用 HTML 与 CSS 来创建提示工具，提示工具在鼠标移动到指定元素后触发。这个提示工具可以使我们排出的网页增加美感，也可以提升用户的可读性。（提示工具可以四周提示这里只演示上和右，左和下的同理调调距离就可以实现了） 一、提示内容在上面 1<效果图敬上>

2<代码敬上>




    
    
    


    
        

        

        

        

        

        

        

        

        

        

        

        

        显示
        
        
        qwert

        qwertadsfadfa

        qwert

        qwert

        qwert

        qwert

        qwert

        
    


body{
    margin:0;
    text-align:center;
}
.q{
    
    display:inline-block;
    position:relative;
}
.w{
    
    padding:15px;
    display:inline-block;
    background-color:green;
    color:white;
}
.q:hover .neirong{
    /* display:block; */
    opacity:1;
    transition:1s;
}
.neirong{
    /* display:none; */
    opacity:0;
    
    background:#666;
    color:white;
    
    border-radius:5px;
    
    position:absolute;
    text-align:center;
    left:-130%;
    top:18%;
    
    min-width:100px;
    
    margin-left:70%;
    
    padding:15px;
    
}
.jiantou{
    width:0px;
    height:0px;
    
    border:10px solid;
    border-color:#666 transparent transparent transparent;
    
    margin:0 auto;
    
    position:absolute;
    top:177px;
    left:40%;
    
    
    
}

（还在新手阶段代码有点恶心见谅）

一、提示内容在右面 1<效果图敬上>

2<代码敬上>




    
    
    


    
        

        

        

        
        显示
        
        
        qwert

        qwertadsfadfasdasdd

        qwert

        qwert

        qwert

        qwert

        qwert

        
    


body{
    margin:0;
    text-align:center;
}
.q{
    
    display:inline-block;
    position:relative;
}
.w{
    padding:15px;
    display:inline-block;
    background-color:green;
    color:white;

   
}
.q:hover .neirong{
    /* display:block; */
    opacity:1;
    transition:1s;

}
.neirong{
    /* display:none; */
    opacity:0;
    
    background:#666;
    color:white;
    
    border-radius:5px;
    
    position:absolute;
    text-align:center;
    left:60%;
    top:5%;
    
    min-width:100px;
    
    margin-left:60%;
    
    padding:15px;
    
    
}
.jiantou{
    width:0px;
    height:0px;
    
    border:10px solid;
    border-color:transparent #666 transparent transparent;
    
    margin:0 auto;
    
    position:absolute;
    top:70px;
    left:-10%;
    
    
    
}

（还在新手阶段代码有点恶心见谅）

GPU云服务器云服务器 tooltip提示提示工具 css工具 css开发工具

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116900.html

css--提示工具

摘要：一提示工具上提示工具代码如下上提示工具提示文本运行结果二右提示工具代码如下提示工具右提示工具提示文本运行结果总结使用容器元素并添加类。在鼠标移动到上时显示提示信息。属性用于为提示框添加圆角。一、提示工具 1、上提示工具代码如下 body{ margin:0; text-align:center; ...

shadajin 2019-08-02 10:55 评论0 收藏0
css--提示工具

摘要：一提示工具上提示工具代码如下上提示工具提示文本运行结果二右提示工具代码如下提示工具右提示工具提示文本运行结果总结使用容器元素并添加类。在鼠标移动到上时显示提示信息。属性用于为提示框添加圆角。一、提示工具 1、上提示工具代码如下 body{ margin:0; text-align:center; ...

xinhaip 2019-08-30 15:54 评论0 收藏0
CSS 提示工具(Tooltip)

摘要：提示工具本文为大家介绍如何使用和来实现提示工具，提示工具在鼠标移动到制定元素后触发先看下面示例基础提示工具代码如下右提示工具右提示工具提示工具运行结果如下图添加箭头我们可以用伪元素及属性为提示工具创建一个小箭头标志，箭头是 CSS 提示工具(Tooltip) 本文为大家介绍如何使用HTML和CSS来实现提示工具，提示工具在鼠标移动到制定元素后触发,先看下面示例： showImg(ht...

cc17 2019-08-02 10:55 评论0 收藏0
CSS 提示工具(Tooltip)

摘要：提示工具本文为大家介绍如何使用和来实现提示工具，提示工具在鼠标移动到制定元素后触发先看下面示例基础提示工具代码如下右提示工具右提示工具提示工具运行结果如下图添加箭头我们可以用伪元素及属性为提示工具创建一个小箭头标志，箭头是 CSS 提示工具(Tooltip) 本文为大家介绍如何使用HTML和CSS来实现提示工具，提示工具在鼠标移动到制定元素后触发,先看下面示例： showImg(ht...

Shisui 2019-08-30 15:54 评论0 收藏0
如何使用CSS创建巧妙的动画提示框

摘要：我们巧妙的提示框打算使用属性选择器也就是方括号表示法。相对性这是用在提示框的父元素上的。向上向下提示框要用到关键帧，而向左向右提示框使用关键帧。注意，在这些关键帧中，我们只定义了提示框所需的终止状态。原文：https://webdesign.tutsplus.co...原作：Jase Smith翻译：Stypstive 当你的用户需要漂亮的图标给出额外的文字信息时，亦或是当他们在点击...

wmui 2019-08-29 12:51 评论0 收藏0