刀尖没有鼠标悬停

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/