Custom CSS Instructions

You can always use the Tooltip Style Generator to adjust the tooltip style in visual mode. But if you want something more complex, Magic Tooltips for Gravity Forms provides an option that you can use to make advanced adjustments with custom css code.

Visit Dashboard -> Magic Tooltips For Gravity Forms -> Settings -> Custom CSS, put your css code into the textarea and click Save Changes to make it take effect. After saving, refresh your browser to see the results.

When writing your own custom css code, you can use two main css selectors: .mm-tooltip-container and .mm-tooltip-container .qtip-content.

.mm-tooltip-container is for the tooltip container. It is the outside box of each tooltip. So you can adjust the border and padding of the tooltip.

For example, the code below changes the padding to 30px and the border to red with 3px width.

.mm-tooltip-container {
    padding:50px;
    border: 3px solid red;
}

You can also add a shadow effect to the tooltip.

.mm-tooltip-container {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 
                0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.mm-tooltip-container .qtip-content is for the tooltip text effect. It is the inner box of each tooltip. You can change text size, font family with this selector.

For example, the code below changes the tooltip text size to 30px, text color to white, and font family to Arial.

.mm-tooltip-container .qtip-content {
    font-size:30px;
    color: white;
    font-family: arial;
}

If you want to customize the css style only on mobile devices, you can use CSS3 media query support. You can specify code for target device width. In the code below, the first part is for devices with max device width 1023px (tablet) and the second part is for devices with max device width 767px (phone).

The order is important, css generated by the Tooltip Style Generator is for desktop, so we use max-device-width query, to reduce size one by one. You cannot put the code for phone above the code for tablet.

@media only screen and (max-device-width: 1023px) {
    .mm-tooltip-container {
        color: #FFFFFF;  
        border-radius: 5px;  
        font-size: 14px;  
        background-color: #D41111;  
        -webkit-border-radius: 5px;  
        -moz-border-radius: 5px;  
        margin-left: 0px;  
        margin-top: 0px;  
        border-color: #333333;  
        border-width: 1;
    }
    .mm-tooltip-container .qtip-content {  
        line-height: 150%;  
        padding: 2.4px 6px 2.4px 6px;
    }
}
@media only screen and (max-device-width: 767px) {
    .mm-tooltip-container {
        color: #FFFFFF;  
        border-radius: 5px;  
        font-size: 14px;  
        background-color: #D41111;  
        -webkit-border-radius: 5px;  
        -moz-border-radius: 5px;  
        margin-left: 0px;  
        margin-top: 0px;  
        border-color: #333333;  
        border-width: 1;
    }
    .mm-tooltip-container .qtip-content {  
        line-height: 150%;  
        padding: 2.4px 6px 2.4px 6px;
    }
}

Please read this article for more detail about it: Responsive Web Design – Media Queries