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

Pentagon Silhouette as Header Background

I am looking to add a unique pentagon shape to my page header background without editing the HTML. I am using SASS for styling purposes. Is there a way to achieve a design similar to this wireframe image of a pentagon with the middle point at the bottom, ...

htmlcsssass

What could be the reason behind my inability to initiate this PHP file through jQuery/AJAX?

I'm experiencing an issue with a piece of PHP code (located at ../wp-content/plugins/freework/fw-freework.php). <div id="new-concept-form"> <form method="post" action="../wp-admin/admin.php?page=FreeWorkSlug" class="form-inline" role ...

javascriptphpjqueryajaxwordpress

Getting Ajax response in HTML Unit can be achieved by leveraging its capability to render the HTML content of the web page

My web application responds with JSON data when I make AJAX requests to the server for CRUD operations. This is because I utilize jQuery to handle the data without needing to refresh the page (MVC). When a new entry is created in the system, the server sen ...

jqueryajaxjsontestinghtmlunit

Unusual sidebar scrolling issues experienced in Firefox

Currently, I am in the process of developing an app with a scrolling sidebar. However, there seems to be some unexpected behavior when using Firefox: the content within the sidebar disappears partially below the top of the div if the mouse is positioned lo ...

css

Choose the list item by identifying the corresponding unordered list

Is there a way to target the second li element within an ul list like this: HTML <ul> <li></li> <ul> <li>This one is what I need to select</li> </ul> </ul> ...

javascriptjquery

Executing two jQuery scripts simultaneously on one page

Struggling to use 2 jQuery objects simultaneously on the same page. Can't get them both working at once despite playing around with the code. I'm new to this, so any help would be greatly appreciated. The code in the head section looks like this ...

jqueryhtml

Creating an array using Vue.js

When I initialize a Vue data array like this [0: Object, 2: Object];, the console log in Vue shows the array as [0: Object, 1: undefined 2: Object];. This causes issues when iterating through with 'v-for="cell in row.cells"' as it results in tryi ...

javascripthtmlvue.js

The CSS div mysteriously vanishes right before I can trigger the click event

My CSS code looks like this: #searchbar-wrapper input#header-searchbar:focus + #search-dropdown-wrapper { display: block; } The purpose of this code is to make a dropdown visible when a user focuses on a textbox. The default behavior should be th ...

css

Implementing Jquery to attach a click event immediately after adding a new row to the table, all

I have an issue where I am adding a new row to my table. Within this row, there is a button that should be clickable and trigger an event. I have come across various solutions, but they all involve using the following code: .on('click', 'bu ...

javascriptjqueryajax

What is the best way to conceal the broken image icon using PHP?

UPLOAD PICTURES IN DATABASE: if (!isset($_FILES['gambarid']['tmp_name'])) { echo ""; }else{ $rand5=rand(); $image_name5= addslashes($_FILES['gambarid']['name']); $fileext5=explode('.&ap ...

phphtmlimageicons

Retrieve a div element using two specific data attributes, while excluding certain other data attributes

Here are some examples of divs: <div id="1" data-effect-in="swing" data-effect-out="bounce"></div> <div id="2" data-effect-in="swing"></div> <div id="3" data-effect-out="swing"></div> <div id="4" data-effect-out data ...

javascriptjqueryhtmlcustom-data-attribute

Guide on capturing JSON objects when the server and client are both running on the same system

I created an HTML page with a form that triggers JavaScript when submitted using the following event handler: onClick = operation(this.form) The JavaScript code is: function operation(x) { //url:"C:\Users\jhamb\Desktop\assignmen ...

javascriptjqueryhtmlajaxjson

PHP is not receiving data from the JQuery Form Plugin

I am currently utilizing the JQuery Form Plugin as an AJAX file uploader. The HTML form in question is being generated dynamically, and it has the following structure: <form id="formUpload" action="fileReceiver.php" method="post" enctype="multipart/fo ...

phpjqueryplugins

Can fputs() or fwrite() encode HTML special characters at times?

I have encountered an issue where I am outputting HTML content as a string to an HTML file, but some servers are encoding special characters (for example " becomes \&quot;). Even after using the htmlspecialcharacters_decode function, the problem p ...

phphtmlstringcharacter-encodinghtmlspecialchars

Trigger a jQuery event when a value is changed

Greetings everyone, I am currently seeking a method to trigger an event each time the values change. Within a div element, there is a live clock that is constantly running: <span id="LiveClockIE">The current time is: 9:37:24 AM</span> I am l ...

jquerylive

Parsing HTML to access inner content

Currently, I have integrated an onClick event to an anchor tag. When the user interacts with it, my objective is to retrieve the inner HTML without relying on the id attribute. Below is the code snippet that illustrates my approach. Any assistance in acc ...

javascripthtml

Incorporate a vibrant red circle within a tab of the navigation bar

I'm looking to incorporate a red dot with a number into a messaging tab to indicate new messages. Below is the HTML code: <ul class="nav pw-nav pw-nav--horizontal"> <li class="nav-item"> <a class="nav ...

javascripthtmlangulartypescriptangular6

Enhance web design with dynamic size pseudo elements using only CSS, no

Before the title, I've added a pseudo element with a slanted background. When the title is wrapped, it increases in height. I've been attempting to make the pseudo element adjust to the title's height, but haven't succeeded yet. I&apos ...

htmlcsspseudo-element

What is the process for executing JavaScript and triggering a postback?

How can I create an 'Add to Favorites' button that changes the image in JavaScript and then performs a postback on an ASP.NET page? aspx <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t ...

c#jqueryasp.net

Footnote fiascos

I am currently in the process of creating a footer for my webpage and have implemented the following CSS styling: #footer { height: 100px; background-color: #F3F3F3; position: absolute; bottom: 0; } Although the footer is displaying at th ...

htmlcss