How to add Hover Text for widgets that do not have it

  • Profile Image
    Asked on February 04, 2017 at 03:27 AM

    for widgets that dont have it, how can we add the hover text for them? i know we can use ":hover" but i dont know how to make it work

  • Profile Image
    Answered on February 04, 2017 at 06:43 AM

    Yes, this is possible to be achieved by using custom CSS, though please keep in mind that the CSS solution is a workaround, and will not be exactly the same as a real Hover Text.

    All we need is to get the ID of the field we are looking to modify:

    For example, on your form 70234370653350, the first Ticker widget with text "About you..." has an ID of #id_4, so we can use the following CSS for this field:

    #id_4:hover:after {
        content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
        padding: 10px;
        z-index: 1000;
        position: absolute;
        right: 5px;
        top: 6px;
        width: 130px;
        border: 4px solid #ccc;
        border-radius: 6px 6px;
        box-shadow: 0px 2px 4px #666;
        background: #f5f5f5;
        white-space: normal;
        font-size: 10px;

    I've marked the parts you would modify between different fields in red. The content property sets what is inside the bubble, while the ID of the field decides which field it is applied to. You would add CSS codes to your form by following this guide:

    Here is a screen recording of how it would work in action:

    Please try it out, and let us know how it goes.

  • Profile Image
    Answered on February 06, 2017 at 06:14 AM

    How can you get the widget ID? 

  • Profile Image
    Answered on February 06, 2017 at 06:38 AM

    Hello ddyoyo10,

    Please check the screenshot below on how to get the ID of your widget:


    Please check the screenshot below on how you can take advantage of browser "Inspect Element" to know the field id or row id of your form:


    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!