Display tooltip on hover in cutom toggle switch - html

Question

I have a custom toggle switch created
When I mousehover on it if the switch is ON its should display the message on tooltip as YES and if OFF tooltip meassage should be NO.
How can I acheive this in custom toggle switch?
.switch {
position: relative;
width: 80px;
height: 30px;
background: #FFF;
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
float: left;
bottom: 3px;
right: 0;
}
.switch-input {
position: absolute;
left: 0;
opacity: 0;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
}
.switch-label:before, .switch-label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
}
.switch-label:before {
content: attr(data-off);
right: 11px;
color: #aaaaaa;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked ~ .switch-label {
background: #E1B42B;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
opacity: 1;
}
.switch-handle {
position: absolute;
top: 1px;
right: 100px;
width: 25px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
left: 50px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* transitions */
.switch-label, .switch-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
.switch-flat {
padding: 0;
background: #FFF;
background-image: none;
}
.switch-flat .switch-label {
background: #FFF;
border: solid 2px #eceeef;
box-shadow: none;
}
.switch-flat .switch-label:after {
color: #0088cc;
}
.switch-flat .switch-handle {
top: 4px;
left: 5px;
background: #dadada;
width: 22px;
height: 22px;
box-shadow: none;
}
.switch-flat .switch-handle:before {
background: #eceeef;
}
.switch-flat .switch-input:checked ~ .switch-label {
background: #FFF;
border-color: #0088cc;
}
.switch-flat .switch-input:checked ~ .switch-handle {
left: 55px;
background: #0088cc;
box-shadow: none;
}
<label class='switch switch-flat'>
<input class='switch-input both' type='checkbox' checked />
<span class='switch-label' data-on='ON' data-off='OFF'></span>
<span class='switch-handle'></span>
</label>

Answer 1

First of all added a <span> as class name as tooltiptext in html inside the switch label
<span class="tooltiptext">ON</span>
While toggling the swicth the text of tooltiptext span also changed by
$(".switch-input").change(function(){
if($(".switch-input").prop("checked")){
$(".tooltiptext").text("ON")
}else{
$(".tooltiptext").text("OFF");
}
});
The visiblity of tooltiptext become hidden while hover the switch become visible
.switch .tooltiptext {
visibility: hidden;
}
.switch:hover .tooltiptext {
visibility: visible;
}
$(".switch-input").change(function(){
if($(".switch-input").prop("checked")){
$(".tooltiptext").text("ON")
}else{
$(".tooltiptext").text("OFF");
}
});
.switch {
margin:50px 45%;
position: relative;
width: 80px;
height: 30px;
background: #FFF;
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
float: left;
bottom: 3px;
right: 0;
}
.switch-input {
position: absolute;
left: 0;
opacity: 0;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
}
.switch-label:before, .switch-label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
}
.switch-label:before {
content: attr(data-off);
right: 11px;
color: #aaaaaa;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked ~ .switch-label {
background: #E1B42B;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
opacity: 1;
}
.switch-handle {
position: absolute;
top: 1px;
right: 100px;
width: 25px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
left: 50px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* transitions */
.switch-label, .switch-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
.switch-flat {
padding: 0;
background: #FFF;
background-image: none;
}
.switch-flat .switch-label {
background: #FFF;
border: solid 2px #eceeef;
box-shadow: none;
}
.switch-flat .switch-label:after {
color: #0088cc;
}
.switch-flat .switch-handle {
top: 4px;
left: 5px;
background: #dadada;
width: 22px;
height: 22px;
box-shadow: none;
}
.switch-flat .switch-handle:before {
background: #eceeef;
}
.switch-flat .switch-input:checked ~ .switch-label {
background: #FFF;
border-color: #0088cc;
}
.switch-flat .switch-input:checked ~ .switch-handle {
left: 55px;
background: #0088cc;
box-shadow: none;
}
/* tooltip */
.switch .tooltiptext {
visibility: hidden;
width: 50px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 37px;
left: calc(50% - 25px);
}
.switch .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.switch:hover .tooltiptext {
visibility: visible;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class='switch switch-flat'>
<input class='switch-input both' type='checkbox' checked />
<span class='switch-label' data-on='ON' data-off='OFF'></span>
<span class='switch-handle'></span>
<span class="tooltiptext">ON</span>
</label>

Answer 2

You can use script like this:
.switch {
position: relative;
width: 80px;
height: 30px;
background: #FFF;
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
border-radius: 18px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
float: left;
bottom: 3px;
right: 0;
}
.switch-input {
position: absolute;
left: 0;
opacity: 0;
}
.switch-label {
position: relative;
display: block;
height: inherit;
font-size: 10px;
text-transform: uppercase;
background: #eceeef;
border-radius: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
}
.switch-label:before, .switch-label:after {
position: absolute;
top: 50%;
margin-top: -.5em;
line-height: 1;
-webkit-transition: inherit;
-moz-transition: inherit;
-o-transition: inherit;
transition: inherit;
}
.switch-label:before {
content: attr(data-off);
right: 11px;
color: #aaaaaa;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
content: attr(data-on);
left: 11px;
color: #FFFFFF;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
}
.switch-input:checked ~ .switch-label {
background: #E1B42B;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
opacity: 1;
}
.switch-handle {
position: absolute;
top: 1px;
right: 100px;
width: 25px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
left: 50px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
/* transitions */
.switch-label, .switch-handle {
transition: All 0.3s ease;
-webkit-transition: All 0.3s ease;
-moz-transition: All 0.3s ease;
-o-transition: All 0.3s ease;
}
.switch-flat {
padding: 0;
background: #FFF;
background-image: none;
}
.switch-flat .switch-label {
background: #FFF;
border: solid 2px #eceeef;
box-shadow: none;
}
.switch-flat .switch-label:after {
color: #0088cc;
}
.switch-flat .switch-handle {
top: 4px;
left: 5px;
background: #dadada;
width: 22px;
height: 22px;
box-shadow: none;
}
.switch-flat .switch-handle:before {
background: #eceeef;
}
.switch-flat .switch-input:checked ~ .switch-label {
background: #FFF;
border-color: #0088cc;
}
.switch-flat .switch-input:checked ~ .switch-handle {
left: 55px;
background: #0088cc;
box-shadow: none;
}
.tooltip {
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<html>
<script>
function content_of_toolTip() {
if (document.getElementById("check").checked == true) {
document.getElementById("tooltipLabel").innerHTML = "yes"
}
if (document.getElementById("check").checked == false) {
document.getElementById("tooltipLabel").innerHTML = "no"
}
}
</script>
<body style="text-align:center;">
<label class='switch switch-flat tooltip'>
<input class='switch-input both' id="check" onchange=content_of_toolTip() type='checkbox' checked />
<span class='switch-label' data-on='ON' data-off='OFF' onmouseover="content_of_toolTip()" onfocus="content_of_toolTip(this)" ></span>
<span class='switch-handle'></span>
<span class="tooltiptext" id="tooltipLabel">Tooltip text</span>
</label>
</body>
</html>