Search code examples
htmlcsstwitter-bootstrap-3right-to-leftbootstrap-popover

display bootstrap popover with right-to-left languages

I am using bootstrap 3.3.5.

I have a test page in which the user can switch between a left-to-right language (English, French, German, etc.) to a right-to-left language (Arabic, Hebrew, etc.).

The issue that I have is that the bootstrap popover does not display correctly under the right-to-left language.

If the user is viewing the page in a right-to-left language, then I pull in the rtl bootstrap css page, otherwise the left-to-right css page is used.

For example, the right-to-left bootstrap css is:

<link rel="stylesheet" href="..../assets/plugins/bootstrap/css/bootstrap-rtl.min.css">

The left-to-right bootstrap css is:

<link rel="stylesheet" href="..../assets/plugins/bootstrap/css/bootstrap.min.css">

Here is a visual display of the popover under the left-to-right language:

enter image description here

Here is a visual display of the popover under the right-to-language, which is not displaying correctly (the arrow and position of the popover is still as if using a left-to-right language/css):

enter image description here

Please ignore the contents of the right-to-left popover, as I have not yet placed in the translation files/links.

I have searched SO & Google for this, but I could not locate a reference to this issue. Does anyone have a suggestion to correct this issue?

Solution

  • I have found that this will fix the popover issue you are expeiencing.

    In your rtl css place this code:

    .popover {
    direction: rtl;
    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform: matrix(-1, 0, 0, 1, 0, 0);
    transform: matrix(-1, 0, 0, 1, 0, 0);
}

    The above code will flip the entire popover.

    Next, you will need to add the following code right under the above mentioned popover css class:

    .popover-title {
    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform: matrix(-1, 0, 0, 1, 0, 0);
    transform: matrix(-1, 0, 0, 1, 0, 0);
}

.popover-content {
    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform: matrix(-1, 0, 0, 1, 0, 0);
    transform: matrix(-1, 0, 0, 1, 0, 0);
}

    the above code will then flip back the popover title and body.

    This will mean that the popover arrow is correctly positioned and the text in the popover is also displayed correctly - in this case rtl.

    Hope this solves your issue.