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;
}

Still need help? Contact Us Contact Us