Right to Left Language Support

You can build Appcues modals and tooltips in a right to left language simply by adding this code to the CSS editor in your global styling page:

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