モーダル内のチェックボックスのツールチップを表示

Question

私はモーダルを持っており、そのモーダルを持っています。私はスイッチボタンのように動作するチェックボックスを持っています。私はその上にマウスを置くとそのチェックボックスのツールチップを表示します。この 。タイトルはここでは機能しません。

私のマークアップはこのようなものです。

<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" />

最終的な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>