FAQ: Right to Left Language Support

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.

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 {
    content: "◀";
    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 {
    content: "▶";
    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;
}
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.