Show small information box when hovering over custom toggle button

I have developed a unique custom toggle switch feature

When I hover my mouse over the switch, it should display a tooltip message as YES if the switch is in the ON position and NO if it's in the OFF position.

Is there a way to implement this functionality with my 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>

htmljquerycss

Answer №1

Initially, I included a <span> with the class name tooltiptext in HTML within the switch label

<span class="tooltiptext">ON</span>

When toggling the switch, the text of the tooltiptext span also changes using the following script:

$(".switch-input").change(function(){
  if($(".switch-input").prop("checked")){
    $(".tooltiptext").text("ON")
  }else{
    $(".tooltiptext").text("OFF");
  }
});

The visibility of the tooltiptext becomes hidden when hovering over the switch and becomes visible as follows:

.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;

}
/* Rest of the CSS code remains unchanged */

<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

Here is a script that you can utilize:

.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 toggleToolTipText() {
   
        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=toggleToolTipText() type='checkbox' checked  />
        <span class='switch-label' data-on='ON' data-off='OFF' onmouseover="toggleToolTipText()" onfocus="toggleToolTipText(this)" ></span>
        <span class='switch-handle'></span>
        <span class="tooltiptext" id="tooltipLabel">Tooltip text</span>
    </label>


</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on aligning a span element at the center of an image without losing its mouseover

<div class="pic"> <img src="image.jpg" height="250"/> <span class="text" style="display:none">text here</span> </div> <scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </scrip ...

javascriptjqueryhtmlcss

Is it possible to view the CSS of a PDF file in print template mode using Chrome?

https://i.stack.imgur.com/XlcWm.png Currently facing an issue with debugging CSS on my PDF template. I am unable to inspect the styles directly in the CSS due to limitations. When using inspect element in Chrome, only the styles for text and elements are ...

htmlcssgoogle-chromefirefoxgoogle-chrome-devtools

Tips on how to break free from a chain or leap over it using jQuery

Is it possible to skip or break out of a chain in jQuery? For instance: $("h3").click(function(){ //doSomething if(~~) // in this case, break out of the chain (functions A and B will not work) else if(~~) // in this case, j ...

jquerychain

challenge with incorporating rating system using jQuery

I am facing a simple issue here, but my knowledge of jQuery is limited and I'm struggling to find a solution. I have been trying to implement a rating function using the code from this link: Everything seems to be working fine, but I noticed that on ...

jqueryhtmlcssjquery-selectors

Step-by-step guide for setting up CodeMirror

I'm feeling a bit lost with what to do next: <link rel="stylesheet" href="lib/codemirror.css"> <script src="lib/codemirror.js"></script> <script> var editor = CodeMirror.fromTextArea(myTextarea, { mode: "text/html" }); ...

javascripthtmlcodemirror

Modifying the color of drawings on a Javascript canvas

I am currently working on developing a drawing board using HTML and JavaScript (Node.js on the server side). One challenge I'm facing is implementing a color picker that allows users to change the paint color dynamically. While I could hard code the c ...

javascripthtml

Achieve the appearance of a galloping horse using JQuery

I am looking for a way to create the illusion of a horse running by displaying a sequence of images quickly. Each image in my folder shows the horse in motion, and I want to make it appear as if the horse is actually moving. Can anyone recommend a librar ...

javascriptphpjquery

Incorporate a map (using leafletjs or Google Maps) as a subtle backdrop

I am currently working on a one-page website and I would like to include a map as a background behind the "contact" section. The map can be set to float, draggable, or positioned at the back. I have experience using both the Google Maps API and LeafletJS, ...

javascripthtmlcssgoogle-mapsleaflet

What is causing the TouchSwipe jQuery plugin not to function in my code?

I have integrated the TouchSwipe jQuery plugin into my code to detect mouse movement and display the number of pixels moved when swiping left or right. To download the TouchSwipe jQuery plugin, I visited this link: TouchSwipe and then proceeded to use it ...

javascriptjqueryhtmljquery-plugins

Tips on expanding the space between words in a scrolling "marquee" text

Looking for some assistance with my jQuery project involving a horizontal scrolling "marquee" text. I am currently trying to adjust the size of the gap between the phrases in the marquee. Here is an example with the phrase "HEY THERE". jQuery(document ...

javascripthtmljquerycss

Issue with form validation, code malfunctioning

I am struggling to figure out why this validation isn't working. Here is the HTML code I'm using: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type='text/javascript' src="scripts. ...

javascripthtmlvalidation

Improving Website SEO with jQuery-Generated Anchor Links for Dynamic Content

So, is this a safe method to use internal links on your site? I have the index page generating the usual php content section and passing it to the div element. THE MAIN QUERY: Will Google still index the pages using this technique? Common sense says it sh ...

phpjqueryseonavigationbandwidth

What causes the size of an image to decrease when placed within an anchor tag?

Trying to add clickable social media icons, but when wrapped in an anchor tag the images shrink significantly. <span class="iconspan"> <a href="https://www.instagram.com/lil_ijoez/" target="_blank" ...

htmlcss

How can I activate a disabled option number 2 after selecting option number 1?

I have encountered an issue with my JavaScript code. The second "select" element is supposed to be disabled by default, but I want it to become enabled when an option is selected from the first "select". However, this functionality is not working as expect ...

javascriptjqueryhtmlcss

Strategies for making a child div fade out when the parent div is hovered over

I have a div with the class name ordershape and inside it, there is another div called fad-res. My goal is to display the corresponding fad-res when I hover over a specific ordershape, while hiding the other divs. <div class="ordershape"> & ...

javascripthtmlcss

Is there a bug with Kendo UI? The Kendo grid pager seems to be misaligned with the bottom

Recently, I've been experimenting with Kendo UI and encountered a specific issue: The pager for my Kendo grid is not aligning properly at the bottom of the grid. Although I've attempted to adjust the CSS styling for k-grid-pager, the issue persis ...

csskendo-uiframeworkskendo-grid

Changing the identification of elements

I noticed that when I open object X and Y, they have the same fields, tabs, and checkboxes. However, I am confused as to why the IDs of the checkboxes and other elements are different. Can you explain what gwt-uid(number) means? Please take a look at the a ...

htmlseleniumgwtautomationpycharm

"Enhanced data storage in MySQL via socket communication: sending a collection of values to store in the database

I'm currently implementing this code and it's functioning well with storing parameter values in the database. However, I now need to store two additional values in the database. How can I pass multiple values into the database using socket? Here ...

phpjquerymysqlsockets

Showing dummy data in demo mode with an AngularJS table

I stumbled upon this interesting jsfiddle http://jsfiddle.net/EnY74/20/ that seems to be using some demo data. If you check out this example https://jsfiddle.net/vsfsugkg/2/, you'll notice that the table originally has only one row, but I modified it ...

javascriptjqueryangularjspaginationjquery-pagination

What does Event.target.id return - the HTML id value or the HTML name value?

HTML Form Example: <form id="form-product-add" style="display: inline;"> <input name="csrf" type="hidden" value="<?= $this->csrf; ?>"> <input type="hidden" name="a ...

javascriptphphtmleventstarget