В leaflet для элемента tooltip реализовано свойство direction, в вот для popup — нет. Возможно, добавят в будущих обновлениях. Но сейчас, если у вас появилась задача кастомизации отображения попап-а, то её можно решать по-разному.
Один из вариантов — показывать кастомный слой вместо штатного L.popup({}). Второй путь — обойтись правкой стилей. Именно этими стилями я с вами собираюсь поделиться.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
.leaflet-popup { // перебиваем позиционирование окна // теперь его верхний-левый угол указывает // в центр слоя bottom: auto !important; left: 20px !important; .leaflet-popup-tip-container { // контейнер треугольничка снизу надо // перетащить влево и почти наверх. left: 0; top: 20px; .leaflet-popup-tip { // а вот и сам треугольничек... // я использую иную технику создания треугольника // потому приходится отключить дефолтовы // стили трансформации и перебить некоторые другие стили background-color: transparent; width: 0; height: 0; margin: 0 0 0 12px; border-style: solid; border-width: 8.5px 8px 8.5px 0; border-color: transparent green transparent transparent; box-shadow: none; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } } .leaflet-popup-content-wrapper { // перебиваем дефолтовое скругление и цвет фона // это не обязательно в контексте нашей задачи border-radius: 0; background-color: green; .leaflet-popup-content { // тут ваши стили для оформления // содержимого поп-ап } } .leaflet-popup-close-button { // контрастный крестик закрытия окна color: yellow; } } |
В целом требуется совсем немного усилий, чтобы расположить попап так, как нужно.
Если браться за первый вариант — с помощью дополнительного слоя, придется выполнить ещё и всю программную реализацию, но, возможно, при этом вы получите какие преимущества, которые я пока не могу разглядеть. :)
В примере используется LESS, но без каких либо миксинов и переменных, так что практически CSS.
