HTML+CSS+JS 简单Tooltip

来源：互联网发布：小米主题破解软件编辑：程序博客网时间：2024/06/09 03:16

效果图一：

HTML：

</div>

</div>

CSS：

.dont_workbench_power_response_parent{
position: relative;
}
.dont_workbench_power_response{
position: relative;
width: 210px;
height: 55px;
background: #232323;
box-shadow: 1px 1px 1px #232323;
border: 1px solid #232323;
text-align: center;
color: #fff;
left: -7px;
top: -120px;
border-radius: 4px;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
display: none;
line-height: 27px;
}
.dont_workbench_power_response span{
margin: 0;
}
.triangle-border {
position: absolute;
left: 95px;
overflow: hidden;
width: 0;
height: 0;
border-width: 10px;
border-style: solid dashed dashed dashed;
}
.tb-border {
bottom:-20px;
border-color:#232323 transparent transparent transparent;
}
.tb-background {
bottom:-19px;
border-color:#232323 transparent transparent transparent;
}

JS：

jQuery('.dont_workbench_power_response_icon').mouseover(function(){

jQuery('.dont_workbench_power_response').show();

}).mouseout(function(){

jQuery('.dont_workbench_power_response').hide();

});

扩展：

设置通用的透明度：{

filter:alpha(opacity=50);

-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;

}

效果图二：

css：

div.operation-authority-content-div{

height: 48px;

text-align: center;

color: #b4b5b5;

position: relative;

line-height: 48px;

}

.cancel_response_requirement_tip{

position: absolute;

width: 300px;

bottom: 43px;

border: 1px solid #ccc;

left: -112px;

z-index: 10;

display: none;

background: #fff;

border-radius: 3px;

padding: 10px;

text-align: left;

}

.cancel_response_requirement_tip > s{

position: absolute;

bottom: -20px;

left: 150px;

display: block;

height: 0;

width: 0;

font-size: 0;

line-height: 0;

border-color: #cccccc transparent transparent transparent;

border-style: solid dashed dashed dashed;

border-width: 10px;

}

.cancel_response_requirement_tip > s > i{

position: absolute;

top: -11px;

left: -10px;

display: block;

height: 0;

width: 0;

font-size: 0;

line-height: 0;

border-color: #ffffff transparent transparent transparent;

border-style: solid dashed dashed dashed;

border-width: 10px;

}

.cancel_response_requirement_tip > p{

margin: 0;

word-wrap: break-word;

white-space: normal;

word-break: break-all;

color: rgb(51, 51, 51);

line-height: 20px;

}

.cancel_response_requirement_tip > p > span{

font-weight: bold;

}

HTML：

<img class="cancel-response-requirement-not-function" src="../images/cancel_response_requirement_grey.png"/>

<p>
<span>剔出参与者状态：</span>审核中
</p>
<p>
<span>剔出参与者时间：</span>2015-06-30 09:39:36
</p>
<p>
<span>剔出参与者原因：</span> jQuery('#requirement_response_upload_title').text('踢出参与者');
</p>

<s>

<i></i>

</s>

</div>

JS：

jQuery('div.operation-authority-content-div img.cancel-response-requirement-not-function').live('mouseover',function(){

jQuery(this).siblings('div.cancel_response_requirement_tip').show();

}).live('mouseleave',function(){

jQuery(this).siblings('div.cancel_response_requirement_tip').hide();

});

0 0