HTML+CSS+JS 简单Tooltip
2017-03-01 10:55
477 查看
效果图一:
HTML:
<div class="dont_workbench_power_response_parent">
<div class="list-item-response dont_workbench_power_response_icon">
<input class="participate-in-demand this_user_response_old" style="width: 200px; height:36px;" type="button"
value="无权限参与"/>
</div>
<div class="dont_workbench_power_response">
<span>提示文字</span>
<div class="triangle-border tb-border"></div>
<div class="triangle-border tb-background"></div>
</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_r
fa6b
esponse_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:
<div class="operation-authority-content-div">
<img class="cancel-response-requirement-not-function" src="../images/cancel_response_requirement_grey.png"/>
<div class="cancel_response_requirement_tip" style="display: none;">
<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>
</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();
});
HTML:
<div class="dont_workbench_power_response_parent">
<div class="list-item-response dont_workbench_power_response_icon">
<input class="participate-in-demand this_user_response_old" style="width: 200px; height:36px;" type="button"
value="无权限参与"/>
</div>
<div class="dont_workbench_power_response">
<span>提示文字</span>
<div class="triangle-border tb-border"></div>
<div class="triangle-border tb-background"></div>
</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_r
fa6b
esponse_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:
<div class="operation-authority-content-div">
<img class="cancel-response-requirement-not-function" src="../images/cancel_response_requirement_grey.png"/>
<div class="cancel_response_requirement_tip" style="display: none;">
<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>
</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();
});
相关文章推荐
- js+html+css实现简单页面交互功能(2015知乎前端笔试题)http://v.youku.com/v_show/id_XMTI0ODQ5NTAyOA==.html?from=y1.7-1.2
- 简单的html兼容(参考js和css的常规写法)
- html+css+js 简单日历
- 使用HTML+CSS+JS制作简单的网页菜单界面
- 简单调试前端 html js css woff ok
- html+css+js简单实现图片轮播效果
- js css+html实现简单的日历
- 让网页装进Android手机(将html+css+js打包成Android应用)(简单的)
- 制作一张简单的网页(HTML+CSS+JS) 【3】
- 对于HTML页面中CSS, JS, HTML的加载与执行过程的简单分析
- 菜鸟小白使用node.js搭建简单服务器(可请求图片,html,js,css,json等文件)
- 用html+css+js实现的一个简单的图片切换特效
- 初识网站前端--用简单的HTML+CSS+js实现的选项卡切换效果
- 制作一张简单的网页(HTML+CSS+JS)【1】
- html-css-js基本理解和简单总结
- 让网页装进Android手机(将html+css+js打包成Android应用)(简单的)
- HTML+CSS+JS 简单的计算器
- 这是一个简单的图片时间器;使用html+css+js,合适新手练习
- html + css + js初步简单学习笔记
- js+html+css简单的互动功能页面(2015知道几乎尖笔试题)http://v.youku.com/v_show/id_XMTI0ODQ5NTAyOA==.html?from=y1.7-1.2