You can build Appcues modals and tooltips in a right-to-left language simply by adding the below code to the CSS editor in your global styling page. Learn more about setting up flows in different languages here. 

Need help with CSS? Reach out to our support team for assistance.

appcues cue, .appcues-actions, .tooltip .panel-content, .tooltip .panel-content-actions {
    direction: rtl;
    text-align: initial;
}

.appcues-actions .appcues-actions-left, .tooltip .panel-content-actions .appcues-actions-left {
    text-align: right;
    float: none;
}

.appcues-actions .appcues-actions-right, .tooltip .panel-content-actions .appcues-actions-right {
    text-align: left;
    float: none;
}

.tooltip .panel-content-actions .appcues-actions-right, .tooltip .panel-content-actions .appcues-actions-left {
    padding-left: 5px;
    padding-right: 5px;
}

appcues cue .appcues-actions-right .appcues-button[data-step=next]:after, appcues cue .step-action-buttons .appcues-actions-right .appcues-button[data-step=next]:after {
    left: 0;
    right: initial;
    border-right: 1px solid #fff;
    border-left: none;
}

appcues cue .appcues-actions-left .appcues-button[data-step=prev]:before, appcues cue .step-action-buttons .appcues-actions-left .appcues-button[data-step=prev]:before {
    right: 0;
    left: initial;
    border-left: 1px solid #fff;
    border-right: none;
}

appcues cue .appcues-actions-right .appcues-button[data-step=next], appcues cue .step-action-buttons .appcues-actions-right .appcues-button[data-step=next] {
    padding-left: 45px;
    padding-right: 18px;
}

appcues cue .appcues-actions-left .appcues-button[data-step=prev], appcues cue .step-action-buttons .appcues-actions-left .appcues-button[data-step=prev] {
    padding-right: 45px;
    padding-left: 18px;
}