Add hover text to Radio buttons widget

Is there any CSS code I can use to make the hover text appear over the radio buttons without having to make them so large? I want all my buttons to be the same size. Otherwise, if I can find / have someone write code (HTML & CSS) for me to create a button with hovertext, would it be possible to add in this new element into my form? The hover text that appears off to the right on the "Upload File" element button would also work for me.

make the hover text appear over the radio buttons without having to make them so large?

I think you are referring to something like a floating box that will contain the text. Unfortunately, no, that is not possible for the widgets as that would need to add an HTML element, which is not allowed on the form.

if I can find / have someone write code (HTML & CSS) for me to create a button with hovertext, would it be possible to add in this new element into my form?

I believe this is already answered above. I've also seen you posted this question on another thread. Please avoid creating multiple threads as most likely than not, you will only be forwarded to your duplicate thread.

https://www.jotform.com/answers/1532933

The hover text that appears off to the right on the "Upload File" element button would also work for me.

That is only applicable for regular fields and not on widgets. If you wish to achieve this, please use a regular field that is similar to your radio buttons.

I have created a form that uses the regular single choice field and added a hover text on the field's properties, then made a custom CSS to make it look like a regular button. Please check out this form and clone it if it is of your liking to inspect the setup.

Form URL: https://form.jotform.com/82077826605967

Hi Vanessa, that was great thanks!! I was able to create new buttons from this code in my form.

Is there a way to make separate hover text for each field? That would be awesome!

Thanks. 

I honestly tried that when I first created the sample form but was unsuccessful. I tried again now and looked for other options, unfortunately I could not find any.

The floating message is actually on a separate "div", inaccessible by the radio buttons via CSS. I think it would have been possible with JS, however, as you know, you can't inject custom JS into the form, only custom CSS.

If you will embed the form using it's full source code, I can give you the JS you can use to dynamically update the floating message depending on the hovered radio button.

Hi thanks Vanessa,

I may have already asked this, but if embed the JS code will the input from the radio buttons still be sent to my email address? One option I thought of was to create 2 radio buttons with hovering text and make them invisible / 100% opacity and place these over the existing buttons to make the text appear that way. Is this possible? Thanks!

Assuming that your JS is only for the hover text, as suggested previously, then yes, you will still be able to receive the notification email.

Please note however that only fields that are on your original JotForm, will be captured by JotForm. If you embed using source code and add any field, then those are ignored by JotForm.

As for your plan on having 2 radio buttons, no that is not possible. CSS can dynamically change designs/content of elements under it. Any element considered as outside it's scope will not be accessible.

Thank you...yes, if you can send me the JS code to do that that'd be great. I'll be using JotForm's 3rd Party publish options to embed the code into my website builder if that makes a difference.

 

Also, I tried to modify these radio buttons to look like my "Add Driver" buttons using code from those buttons, They came close but the corners get cut off and the Font / colors look slightly different as well. Is there a way to get them matching? thanks.

if you can send me the JS code to do that that'd be great.

Let me check with our colleague is she is already working on the code. Also, please note that if the form is embedded using source code on your web page, it is required to modify the source code to add the custom scripts to the form each time you modify the form and embed the form again on your web site. Let us know if that works for you. 

Also, I tried to modify these radio buttons to look like my "Add Driver" buttons using code from those buttons, They came close but the corners get cut off and the Font / colors look slightly different as well. Is there a way to get them matching? 

Please try adding the following CSS code to the form to increase the width.

.form-single-column .form-checkbox-item, .form-single-column .form-radio-item {

  width: 106%;

} 

Also, please change the margin settings as below in the section .form-radio-item label {}.

margin : 0px 0px 9px 0px;

Hope this information helps!

Let me check with our colleague is she is already working on the code. Also, please note that if the form is embedded using source code on your web page, it is required to modify the source code to add the custom scripts to the form each time you modify the form and embed the form again on your web site. Let us know if that works for you.

 

Hi that should be fine. What I'm getting from this, is that each time I embed my source code I would just add this extra code (as it is not auto generated), correct? That is fine.

 

Please try adding the following CSS code to the form to increase the width.

.form-single-column .form-checkbox-item, .form-single-column .form-radio-item {

  width: 106%;

 

} 

 

Thanks, the button is looking better after doing this, however there is still an unwanted, box-type outline around these buttons. How can I get rid of that?

 

Finally, how can I change the color the radio buttons change to when I press them? I like that they change colors, but would like to make it a solid color and maybe a dark blue (the same color the page tabs change to when pressed) as well as make the hover text appear closer to the radio buttons.

 

Thank you

Inject the following custom CSS codes:

.form-radio-item {

border: none !important;

box-shadow: none !important;

}

To change the color of the selected item, inject this custom CSS codes:

.form-radio-item input:checked + label {

background: #117fa0 !important;

}

To make the hover text closer, add the following custom CSS:

.form-description {

right: auto !important;

top: 25px !important;

margin-left: 180px !important;

}

Thanks so much Welvin and everyone else. This worked perfectly and it's looking great!

Let me check with our colleague is she is already working on the code. Also, please note that if the form is embedded using source code on your web page, it is required to modify the source code to add the custom scripts to the form each time you modify the form and embed the form again on your web site. Let us know if that works for you.

Yes, If I could get this code to make hover text as the user hovers over each button it would make it that much better! Thanks again for all your help!!

Vanessa_T

If you will embed the form using it's full source code, I can give you the JS you can use to dynamically update the floating message depending on the hovered radio button.

Hi Vanessa, can you give me the JS code to do this. I am fine with having to embed it each time. Thank you.

Unfortunately, our colleague Vanessa_T is not online at the moment. However, your response has been received by her. Please be noted that we can work on the custom scripts when the support forum is manageable and on our free time. If there is any update, you'll be posted here. 

We appreciate your patience and understanding. 

Kiran, great thanks I'll wait.

@Clintluna,

Your question is moved to a separate thread and shall be addressed there shortly. Please follow the link below:

https://www.jotform.com/answers/1551250

Thank you!  

Hi @Clintluna,

I sincerely apologize for not having to respond to you timely. I've checked your form on where you've used the radio button and found this.

As such, I've created the JS script that you can embed to your form so it will look like it has separate floating message. Please insert it together with the HTML of the source code.

<script type="text/javascript">

$(document).ready(function(){

var descriptionContainer = document.getElementById('id_138').getElementsByClassName('form-description');

var description = document.getElementById('id_138').getElementsByClassName('form-description-content');

      document.getElementById('id_138').addEventListener('mouseenter', function(){ // id_138 is the id of the question

        descriptionContainer[0].hidden = true; // this hides the popup so the default popup value will not be displayed

    });

      // first option

      document.getElementById('label_input_138_0').addEventListener("mouseenter", function(){ // label_input_138_0 is the id of the label for the first option

        var content = document.getElementById('input_138_0').dataset.calcvalue; // input_138_0 is the actual radio button where we will get the assigned calculation values

        description[0].innerHTML = content; // this replaces the content of the popup

        descriptionContainer[0].style.cssText = "top: 25px !important"; // this will position the description beside the option, adjust the numerical value if you change the options height

        descriptionContainer[0].hidden = false; // this displays the popup

    });

      // second option

      document.getElementById('label_input_138_1').addEventListener("mouseenter", function(){

      var content = document.getElementById('input_138_1').dataset.calcvalue;

      description[0].innerHTML = content;

      descriptionContainer[0].style.cssText = "top: 82px !important";

      descriptionContainer[0].hidden = false;

      });

      // third option

      document.getElementById('label_input_138_2').addEventListener("mouseenter", function(){

      var content = document.getElementById('input_138_2').dataset.calcvalue;

      description[0].innerHTML = content;

      descriptionContainer[0].style.cssText = "top: 142px !important";

      descriptionContainer[0].hidden = false;

      });

  });

</script>

For this to work please follow these steps as pre-requisite:

1. Add a Hover Text - the contents will not be shown, we will just use the floating box

2. Assign calculation values - the values here will be the one shown when the option is hovered

3. Should you use the JS code for a different field, make sure to replace the IDs accordingly. To check for the field and the option's ID, please check this guide:

3.1 this is the field ID, this is highlighted in purple on the JS code above 

3.2 this is the label for the radio button option, this is highlighted in orange above, this value is different per option

3.3 this is the actual radio button option, this is highlighted in blue above, note that for each option, the value is different as well

3.4 notice this is the assigned calculation values on step #2, this will be the one displayed when the option is hovered

If you're having difficulty using the JS for another field, just let us know so we can check the corresponding IDs

Thanks so much Vanessa! To do this for the other radio buttons I will just copy / paste this and change the ID number.

I've added a radio button to my configurable list, and I'd like it to look like these as well, 

I've used the code below, but it didn't seem to work. Is there a way to do this to make my form uniform. :-) Thanks!  

.radio-item input {

    display : none;

}

.form-radio-item input:checked + label {

    background : linear-gradient(to bottom, #B4F9F1 0%, #ebf5f3 100%);

}

.radio-item label {

    display : inline-block;

    overflow : hidden;

    margin : 0px 0px 9px 0px;

    position : relative;

    width : 150px;

    height : 40px;

    font : 700 13px/40px Lato, sans-serif;

    font-family : inherit;

    text-align : center;

    color : #999;

    background : #ffff;

    background : linear-gradient(to bottom, #fff 0%, #eee 100%);

    cursor : pointer;

    transform : translateZ(0);

    -webkit-transform : translateZ(0);

    border-radius : 10px;

    border : 2px solid #21a6cf

    padding: px;

    color : #ffffff;

    font-family : "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, sans-serif;

    font-size : 20px;

    box-shadow : 8px 8px 5px grey;

    background : #21a6cf;

}

If you want to implement the same layout for radio buttons in a Configurable List widget, then you must modify it a bit, the classes used in the widget are not the same so you should be injecting this code to the widget instead: 

.radio input{

    width: 0px;

}

.radio input[type=radio]:checked:after {

    content: "";

    display: block;

    background: #117fa0;

    width: 100%; 

    height: 100%; 

    position: absolute;

    top:0px; 

    left:0px; 

    z-index: -1;

}

.radio label {

    display : inline-block;

    overflow : hidden;

    margin : 0px 0px 9px 0px;

    position : relative;

    width : 150px;

    height : 40px;

    font : 700 13px/40px Lato, sans-serif;

    font-family : inherit;

    text-align : center;

    color : #999;

    background : #ffff;

    background : linear-gradient(to bottom, #fff 0%, #eee 100%);

    cursor : pointer;

    transform : translateZ(0);

    -webkit-transform : translateZ(0);

    border-radius : 10px;

    border : 2px solid #21a6cf

    padding: px;

    color : #ffffff;

    font-family : "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, sans-serif;

    font-size : 20px;

    box-shadow : 8px 8px 5px grey;

    background : #21a6cf;

}

This guide will help you injecting it: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets 

I hope this helps. 

Thanks Kevin! So it almost looks perfect....It just displays the radio selection still in the middle of the button instead of the text. How can I make it display the text? (Attaching picture).

Also @Kevin or @Vanessa_T 

Is there a way to add hover text to the radio buttons in the configurable list as well? Can then use the JS script above to make the hover change per button. Thanks!!!

Unfortunately, the image did not went thru. Please follow this guide when posting screenshots to the forum:

How-to-Post-Screenshots-to-Our-Support-Forum

As I am not sure what exactly was the change that you intended to have, but since you mentioned you wanted the radio options to look the same as the other buttons, then I made the necessary changes to achieve it on my cloned form.

You can use my colleague's modified CSS of yours, or you can simply edit your CSS to use .radio class instead of .radio-item.

If this is not the change that you wanted, please share a screenshot by following the guide above.

On the other hand, unfortunately I could not find a way to add a floating message for the configurable list. Unlike the regular fields, the widgets doesn't have an option to add Hover Text.

Thanks Vanessa,

Can you paste the code you used or link to the cloned form?

I got them to look like yours except mine aren't in a single column like yours (which is what I want) and I'm not able to click them either. Since it doesn't have the option for hover text, is there a way to get two rows of static text to line up with it: One row next to the "Basic" button, and the Second row next to the "Full" button?

Also is there a way to make a radio button have the some id# when I copy paste / duplicate it? If I want to do the hover option for say 10 or so of these I'd like to just 10 so I don't have to rewrite each ID. THanks

 

 

Thanks!

I will ask my colleague which changes she did to the code so we can provide them here. 

 Since it doesn't have the option for hover text, is there a way to get two rows of static text to line up with it: One row next to the "Basic" button, and the Second row next to the "Full" button?

You may add it with this code: 

/* ---- For Basic:  */ 

.radio:nth-child(1):after {

    content: "Test";

    position: absolute;

    margin-left: 20px;

    margin-top: 10px;

}

/* ---- For Full*/

.radio:nth-child(2):after {

    content: "Test";

    position: absolute;

    margin-left: 20px;

    margin-top: 10px;

}

Feel free to change the text between "content" with the static text you want to have. Note that the code needs to be injected to the widget too so you will need to follow this guide: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets 

Also is there a way to make a radio button have the some id# when I copy paste / duplicate it? If I want to do the hover option for say 10 or so of these I'd like to just 10 so I don't have to rewrite each ID. THanks

The code we have provided uses the fields classes, for example, ".radio" so you would not need to change anything and simply inject the code to the widget. 

You may also provide us more details about your question in case I misunderstood it. 

We will wait for your response. 

Thanks for the reply, Looking forward to the code.

The code provided for the text besides the buttons makes the "Test" text go over the button on it gets cut off. Here's a pic of what I would like to achieve here (just a cut/paste pic):

I'd like to have radio buttons with the same ID number for when I use the JS code I can just use 1 ID for all of the hover text.

Since the thread is too long with different codes, please allow me sometime to check on this and get back to you with relevant information.

Thank you for your patience. 

I am sorry for the delay. I have checked your JotForm and applied the changes with the codes provided which seems to be working fine. However, could you confirm if you are referring to the text displayed from the configurable list widget? Also, it would be helpful if you can share the web page URL where the source code of your JotForm is embedded to take a look.

We will wait for your response. Thank you! 

Hi, sure...I'm referring to this form: https://www.jotform.com/build/81906589374168

It's on page 2 of the form, in the configurable list, in the add vehicle list.....the radio buttons "basic" and "full" there are not clickable either. Thanks

Thank you for providing additional information. I see that the radio button is being selected in the configurable list. However, the background color is not changed when it is selected. Let me check this further and get back to you.

Thank you!

Thank you Kiran, looking forward to your reply.

Hi Kiran / Vanessa_T,

Just checking on any updates with this code.

Thanks!

Hi Kiran,

Don't worry about the extra text here.....If I can just get these basic / full buttons in the configurable widgets to change color when clicked on, that should be satisfactory.

This issue of making the buttons clickable in the configurable list has now been resolved! Thanks for all your help here!!

Hi Vanessa_T,

I inserted / embedded the JS code along with the html script into my website but the hover text is not working on my end. I’m wondering, when I copy the HTML code from JotForm can I still use 3rd party publish options? For example, If I were working in Wix website builder, can I use the Wix HTML publish option provided in JotForm and then add the JavaScript code, or do I need to just use the HTML code from publish code in JotForm? I’m copying and pasting the code I used to see if maybe it was a matter of an incorrect label. 

 Thanks for any help / advice! 

Hello,

I have tested your code locally and the hover text seems to work properly for me. If you are experiencing issues with a wix embedded form, this might be a script conflict or other restrictions by wix. 

You could check the console log to see if there are errors: How-to-get-a-console-report-from-most-common-browsers