Question

我有一个模态和内部模态我有一个复选框，就像一个开关按钮。我想显示该复选框的工具提示，当我将悬停在它上。如何做到这一点。标题在这里不起作用。

我的标记是这样的。

＆＃13;

<input id="chkSyncType" title="The tooltip"  type="checkbox" class="make-switch" data-on-color="success" data-on-text="&nbsp;Auto&nbsp;" data-off-text="&nbsp;Manual&nbsp;" value="false" checked="checked" />

＆＃13;

最终的HTML是

<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;">&nbsp;Auto&nbsp;</span><span class="bootstrap-switch-label" style="width: 80px;">&nbsp;</span><span class="bootstrap-switch-handle-off bootstrap-switch-default" style="width: 80px;">&nbsp;Manual&nbsp;</span><input id="chkSyncType" title="mytooltip" type="checkbox" class="make-switch" data-on-color="success" data-on-text="&nbsp;Auto&nbsp;" data-off-text="&nbsp;Manual&nbsp;" value="false" checked="checked"></div></div>

Answer 1

如果要将标题显示为工具提示，可以执行以下操作。

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;">&nbsp;Auto&nbsp;</span><span class="bootstrap-switch-label" style="width: 80px;">&nbsp;</span><span class="bootstrap-switch-handle-off bootstrap-switch-default" style="width: 80px;">&nbsp;Manual&nbsp;</span><input id="chkSyncType" title="mytooltip" type="checkbox" class="make-switch" data-on-color="success" data-on-text="&nbsp;Auto&nbsp;" data-off-text="&nbsp;Manual&nbsp;" value="false" checked="checked"></div></div>

显示模式内复选框的工具提示

1 个答案: