刀尖沒有鼠標懸停

Question

我創建使用http://tutorialzine.com/2014/07/css-inline-help-tips/內嵌幫助提示基於HTML css.Below給出的代碼工作對幫助圖標鼠標懸停它顯示了一些文本，但我需要的是自動顯示鼠標懸停文本是「你好，請幫」用了鼠標懸停時我需要的鼠標懸停信息提前

.help-tip{ 
 
    position: absolute; 
 
    top: 18px; 
 
    right: 18px; 
 
    text-align: center; 
 
    background-color: #BCDBEA; 
 
    border-radius: 50%; 
 
    width: 24px; 
 
    height: 24px; 
 
    font-size: 14px; 
 
    line-height: 26px; 
 
    cursor: default; 
 
} 
 

 
.help-tip:before{ 
 
    content:'?'; 
 
    font-weight: bold; 
 
    color:#fff; 
 
} 
 

 
.help-tip:hover p{ 
 
    display:block; 
 
    transform-origin: 100% 0%; 
 

 
    -webkit-animation: fadeIn 0.3s ease-in-out; 
 
    animation: fadeIn 0.3s ease-in-out; 
 

 
} 
 

 
.help-tip p{ \t /* The tooltip */ 
 
    display: none; 
 
    text-align: left; 
 
    background-color: #1E2021; 
 
    padding: 20px; 
 
    width: 200px; 
 
    position: absolute; 
 
    border-radius: 3px; 
 
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); 
 
    right: -4px; 
 
    color: #FFF; 
 
    font-size: 13px; 
 
    line-height: 1.4; 
 
} 
 

 
.help-tip p:before{ /* The pointer of the tooltip */ 
 
    position: absolute; 
 
    content: ''; 
 
    width:0; 
 
    height: 0; 
 
    border:6px solid transparent; 
 
    border-bottom-color:#1E2021; 
 
    right:10px; 
 
    top:-12px; 
 
} 
 

 
.help-tip p:after{ /* Prevents the tooltip from being hidden */ 
 
    width:100%; 
 
    height:40px; 
 
    content:''; 
 
    position: absolute; 
 
    top:-40px; 
 
    left:0; 
 
} 
 

 
/* CSS animation */ 
 

 
@-webkit-keyframes fadeIn { 
 
    0% { 
 
    opacity:0; 
 
    transform: scale(0.6); 
 
    } 
 

 
    100% { 
 
    opacity:100%; 
 
    transform: scale(1); 
 
    } 
 
} 
 

 
@keyframes fadeIn { 
 
    0% { opacity:0; } 
 
    100% { opacity:100%; } 
 
}

<div class="help-tip"> 
 
    <p id="helpinforchart">hello pls help</p> 
 
</div>

Answer 1

一次頁面loads.Thanks自動顯示刪除從

.help-tip:hover

屬性將幫助你

.help-tip{ 
 
\t position: absolute; 
 
\t top: 18px; 
 
\t right: 18px; 
 
\t text-align: center; 
 
\t background-color: #BCDBEA; 
 
\t border-radius: 50%; 
 
\t width: 24px; 
 
\t height: 24px; 
 
\t font-size: 14px; 
 
\t line-height: 26px; 
 
\t cursor: default; 
 
} 
 

 
.help-tip:before{ 
 
\t content:'?'; 
 
\t font-weight: bold; 
 
\t color:#fff; 
 
} 
 

 
.help-tip p{ \t /* The tooltip */ 
 
\t text-align: left; 
 
\t background-color: #1E2021; 
 
\t padding: 20px; 
 
\t width: 200px; 
 
\t position: absolute; 
 
\t border-radius: 3px; 
 
\t box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); 
 
\t right: -4px; 
 
\t color: #FFF; 
 
\t font-size: 13px; 
 
\t line-height: 1.4; 
 
\t transform-origin: 100% 0%; 
 
\t -webkit-animation: fadeIn 0.3s ease-in-out; 
 
\t animation: fadeIn 0.3s ease-in-out; 
 
} 
 

 
.help-tip p:before{ /* The pointer of the tooltip */ 
 
\t position: absolute; 
 
\t content: ''; 
 
\t width:0; 
 
\t height: 0; 
 
\t border:6px solid transparent; 
 
\t border-bottom-color:#1E2021; 
 
\t right:10px; 
 
\t top:-12px; 
 
} 
 

 
.help-tip p:after{ /* Prevents the tooltip from being hidden */ 
 
\t width:100%; 
 
\t height:40px; 
 
\t content:''; 
 
\t position: absolute; 
 
\t top:-40px; 
 
\t left:0; 
 
} 
 

 
/* CSS animation */ 
 

 
@-webkit-keyframes fadeIn { 
 
\t 0% { 
 
\t \t opacity:0; 
 
\t \t transform: scale(0.6); 
 
\t } 
 

 
\t 100% { 
 
\t \t opacity:100%; 
 
\t \t transform: scale(1); 
 
\t } 
 
} 
 

 
@keyframes fadeIn { 
 
\t 0% { opacity:0; } 
 
\t 100% { opacity:100%; } 
 
}

<div class="help-tip"> 
 
\t <p id="helpinforchart">hello pls help</p> 
 
</div>

Answer 2

只需添加顯示：在地方顯示器的結構：無

.help-tip p 
{ 
display:block; 
} 

Answer 3

卸下顯示：從CSS如下沒有

.help-tip{ 
 
\t position: absolute; 
 
\t top: 18px; 
 
\t right: 18px; 
 
\t text-align: center; 
 
\t background-color: #BCDBEA; 
 
\t border-radius: 50%; 
 
\t width: 24px; 
 
\t height: 24px; 
 
\t font-size: 14px; 
 
\t line-height: 26px; 
 
\t cursor: default; 
 
} 
 

 
.help-tip:before{ 
 
\t content:'?'; 
 
\t font-weight: bold; 
 
\t color:#fff; 
 
} 
 

 
.help-tip:hover p{ 
 
\t display:block; 
 
\t transform-origin: 100% 0%; 
 

 
\t -webkit-animation: fadeIn 0.3s ease-in-out; 
 
\t animation: fadeIn 0.3s ease-in-out; 
 

 
} 
 

 
.help-tip p{ \t /* The tooltip */ 
 
\t 
 
\t text-align: left; 
 
\t background-color: #1E2021; 
 
\t padding: 20px; 
 
\t width: 200px; 
 
\t position: absolute; 
 
\t border-radius: 3px; 
 
\t box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); 
 
\t right: -4px; 
 
\t color: #FFF; 
 
\t font-size: 13px; 
 
\t line-height: 1.4; 
 
} 
 

 
.help-tip p:before{ /* The pointer of the tooltip */ 
 
\t position: absolute; 
 
\t content: ''; 
 
\t width:0; 
 
\t height: 0; 
 
\t border:6px solid transparent; 
 
\t border-bottom-color:#1E2021; 
 
\t right:10px; 
 
\t top:-12px; 
 
} 
 

 
.help-tip p:after{ /* Prevents the tooltip from being hidden */ 
 
\t width:100%; 
 
\t height:40px; 
 
\t content:''; 
 
\t position: absolute; 
 
\t top:-40px; 
 
\t left:0; 
 
} 
 

 
/* CSS animation */ 
 

 
@-webkit-keyframes fadeIn { 
 
\t 0% { 
 
\t \t opacity:0; 
 
\t \t transform: scale(0.6); 
 
\t } 
 

 
\t 100% { 
 
\t \t opacity:100%; 
 
\t \t transform: scale(1); 
 
\t } 
 
} 
 

 
@keyframes fadeIn { 
 
\t 0% { opacity:0; } 
 
\t 100% { opacity:100%; } 
 
}

<div class="help-tip"> 
 
\t <p id="helpinforchart">hello pls help</p> 
 
</div>

Answer 4

休謨

您可以更改CSS像：

/* add 'active' class behavior */ 
.help-tip:hover p, 
.help-tip.active p{ 
    display:block; 
    transform-origin: 100% 0%; 

    -webkit-animation: fadeIn 0.3s ease-in-out; 
    animation: fadeIn 0.3s ease-in-out; 

} 

，並更改HTML這樣的：如果你想改變操作行爲爲 '懸停秀'

<!-- add 'active' class --> 
<div class="help-tip active"> 
    <p id="helpinforchart">hello pls help</p> 
</div> 

，添加js：

// native 
var tip = document.getElementsByClassName('help-tip')[0]; 
tip.className = tip.className.replace('active', ''); 

// jQuery 
$('.help-tip').removeClass('active') 

Answer 5

如果你願意加入一些JavaScript本jQuery代碼和。顯示類保持懸停功能，並顯示在文檔加載的工具提示：

的CSS：

.display { 
    display: block !important; 
} 

的jQuery（裝在文檔「 <頭>「）：

$(window).load(function(){ 
    $('#helpinforchart').addClass('display'); 
    $('.help-tip').mouseleave(function(){ 
    $('#helpinforchart').removeClass('display'); 
    $(this).unbind(); 
    }) 
}); 

要看到它的工作看到這個小提琴：https://jsfiddle.net/r80o6ej8/