CSS 提示工具(Tooltip)

時間 2019-12-04

標籤 css 提示工具 tooltip 欄目 CSS 简体版

原文原文鏈接

本文的內容爲使用 HTML 與 CSS 來建立提示工具，提示工具在鼠標移動到指定元素後觸發。這個提示工具可使咱們排出的網頁增長美感，也能夠提高用戶的可讀性。（提示工具能夠四周提示這裏只演示上和右，左和下的同理調調距離就能夠實現了）

1、提示內容在上面

1<效果圖敬上>

2<代碼敬上>

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="tishineirong.css"/>
</head>
<body>
    <div class="q">
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <span class="w">顯示</span>
        <div class="neirong">
        <div class="jiantou"></div>
        qwert<br/>
        qwertadsfadfa<br/>
        qwert<br/>
        qwert<br/>
        qwert<br/>
        qwert<br/>
        qwert<br/>
        </div>
    </div>
</body>
</html>
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%;
    
    
    
}

（還在新手階段代碼有點噁心見諒）css

1、提示內容在右面

1<效果圖敬上>

2<代碼敬上>

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="tishineirong2.css"/>
</head>
<body>
    <div class="q">
        <br/>
        <br/>
        <br/>
        
        <span class="w">顯示</span>
        <div class="neirong">
        <div class="jiantou"></div>
        qwert<br/>
        qwertadsfadfasdasdd<br/>
        qwert<br/>
        qwert<br/>
        qwert<br/>
        qwert<br/>
        qwert<br/>
        </div>
    </div>
</body>
</html>
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%;
    
    
    
}

（還在新手階段代碼有點噁心見諒）html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。