显示模态内复选框的工具提示 [英] Showing tooltip for a checkbox inside a modal
本文介绍了显示模态内复选框的工具提示的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个模式和里面的模式,我有一个复选框,就像一个开关按钮。我想显示该复选框的工具提示,当我将它悬停在上面。如何做到这一点。标题在这里不起作用。
我的标记就是这样。
< input id =chkSyncTypetitle =工具提示type =checkboxclass =make-switchdata-on-color =successdata-on -text = &安培; NBSP;自动&安培; NBSP;数据断文本= &安培; NBSP;手动&安培; NBSP; value =falsechecked =checked/>
最后的html是
< div class =bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-on bootstrap-switch- id-chkSyncType bootstrap-switch-animatestyle =width:161.818px;>< div class =bootstrap-switch-containerstyle =width:240px; margin-left:0px;>< span class =bootstrap-switch-handle-on bootstrap-switch-successstyle =width:80px;>& nbsp; Auto& nbsp;< / span>< span class =bootstrap-switch-标签style =width:80px;>& nbsp;< / span>< span class =bootstrap-switch-handle-off bootstrap-switch-defaultstyle =width:80px;> & nbsp; Manual& nbsp;< / span>< input id =chkSyncTypetitle =mytooltiptype =checkboxclass =make-switchdata-on-color =successdata-on -text = &安培; NBSP;自动&安培; NBSP;数据断文本= &安培; NBSP;手动&安培; NBSP; value =falsechecked =checked>< / div>< / div>
解决方案
如果要将标题显示为工具提示,你可以做这样的事情。
input {position:relative;} input :: after {content:attr (标题);显示:块; / *仅用于演示目的:) * / transition:全部.3s;不透明度:0;位置:绝对;背景:番茄;白颜色;填充:0.5rem 1rem; bottom:-3rem;} input:hover :: after {opacity:1;}
< div class =bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-on bootstrap-switch-id-chkSyncType bootstrap-switch-animatestyle =width:161.818px;><<< ; div class =bootstrap-switch-containerstyle =width:240px; margin-left:0px;>< span class =bootstrap-switch-handle-bootstrap-switch-successstyle =width :80px;>& nbsp; Auto& nbsp;< / span>< span class =bootstrap-switch-labelstyle =width:80px;>& nbsp;< / span> < span class =bootstrap-switch-handle-off bootstrap-switch-defaultstyle =width:80px;>& nbsp; Manual& nbsp;< / span>< input id =chkSyncType title =mytooltiptype =checkboxclass =make-switchdata-on-color =successdata-on-text =& nbsp; Auto& nbsp;数据断文本= &安培; NBSP;手动&安培; NBSP; value =falsechecked =checked>< / div>< / div>
$ b
I have a modal and inside that modal I have a checkbox which is acting like a switch button.I want to show a tooltip for that checkbox when I will hover on it.How to do this . Title is not working here.
My markup is like this.
<input id="chkSyncType" title="The tooltip" type="checkbox" class="make-switch" data-on-color="success" data-on-text=" Auto " data-off-text=" Manual " value="false" checked="checked" />
Final html is
<div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-on bootstrap-switch-id-chkSyncType bootstrap-switch-animate" style="width: 161.818px;"><div class="bootstrap-switch-container" style="width: 240px; margin-left: 0px;"><span class="bootstrap-switch-handle-on bootstrap-switch-success" style="width: 80px;"> Auto </span><span class="bootstrap-switch-label" style="width: 80px;"> </span><span class="bootstrap-switch-handle-off bootstrap-switch-default" style="width: 80px;"> Manual </span><input id="chkSyncType" title="mytooltip" type="checkbox" class="make-switch" data-on-color="success" data-on-text=" Auto " data-off-text=" Manual " value="false" checked="checked"></div></div>
解决方案
If you want to display the title as a tooltip, you can do something like this.
input {
position: relative;
}
input::after {
content: attr(title);
display: block;
/* just for demo purposes :) */
transition: all .3s;
opacity: 0;
position: absolute;
background: tomato;
color: white;
padding: 0.5rem 1rem;
bottom: -3rem;
}
input:hover::after{
opacity: 1;
}
<div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-on bootstrap-switch-id-chkSyncType bootstrap-switch-animate" style="width: 161.818px;"><div class="bootstrap-switch-container" style="width: 240px; margin-left: 0px;"><span class="bootstrap-switch-handle-on bootstrap-switch-success" style="width: 80px;"> Auto </span><span class="bootstrap-switch-label" style="width: 80px;"> </span><span class="bootstrap-switch-handle-off bootstrap-switch-default" style="width: 80px;"> Manual </span><input id="chkSyncType" title="mytooltip" type="checkbox" class="make-switch" data-on-color="success" data-on-text=" Auto " data-off-text=" Manual " value="false" checked="checked"></div></div>
这篇关于显示模态内复选框的工具提示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文