Динамически корректировать положение всплывающей подсказки Kendo UI?

Question

Я удивительно не нашел ничего по этому вопросу, пока гуглял вокруг. Мой вариант использования кажется довольно простым, подсказка kendo ui переполняет окно, если оно выходит за пределы окна.

Итак, я хочу сохранить всплывающие подсказки справа или слева от моих элементов. У меня всплывающая подсказка настроена так:

var clickTooltip = $('#some-element').kendoTooltip({
                filter: '.tooltip-eles',
                position: 'left',
                width: 250,
                showOn: 'click',
                autoHide: false,
                content: kendo.template($('#tooltipTemplate').html()),
                show: function(e) {
                    console.log(e);
                    var tooltipElement = e.sender.popup.element;
                    var tooltipPosition = isTooltipInBounds(tooltipElement);
                    e.sender.setOptions({position: tooltipPosition});

                }
            }).data('kendoTooltip');

Где isTooltipInBounds проверяет, уходит ли всплывающая подсказка с правой или левой стороны окна, и возвращает противоположное направление, в котором я хочу, чтобы всплывающая подсказка была включена, чтобы избежать переполнения.

Таким образом, для случая, когда всплывающая подсказка выходит за правую часть окна, она возвращается влево. Поэтому я установил параметры и установил позицию как "влево", но подсказка не меняет позиции.

Я не уверен, как мне удастся динамически изменить настройку положения всплывающей подсказки в той части моего элемента, где есть место для этого. Кто-нибудь знает, как вы можете это сделать?

Answer 1

Я не решаюсь опубликовать этот ответ, так как он немного хакерский и использует биты непубличного api / приватного кода виджета "Подсказка" и требует полировки для удаленного производства, но...

Проблема с вашим текущим кодом заключается в том, что событие показа всплывающей подсказки срабатывает после того, как подсказка уже показана, поэтому попытка изменить положение здесь слишком поздно.

В подсказке нет встроенного события " Перед показом".

Но внутренне всплывающая подсказка использует всплывающий виджет ( документация по всплывающим виджетам).

У виджета "Всплывающее окно" есть открытое событие, которое срабатывает перед отображением всплывающего окна, которое также может быть отменено.

Таким образом, если вы можете прикрепить обработчик к событию open внутреннего всплывающего окна всплывающей подсказки, вы можете внести изменения в всплывающее окно до его отображения.

К сожалению, внутренний всплывающий виджет всплывающей подсказки не создается до тех пор, пока всплывающая подсказка не будет показана впервые, что затрудняет прикрепление обработчика при настройке всплывающей подсказки.

Инициализируйте всплывающую подсказку:

var tooltip = $('#some-element').kendoTooltip({
    position: 'left',
    width: 250,
    showOn: 'click',
    autoHide: false,
    content: "It's the tooltip!",
}).data('kendoTooltip');

HACK # 1, принудительно создайте внутренний виджет Popup, чтобы мы могли прикрепить наш обработчик к его событию open:

tooltip._initPopup();

При этом используется "закрытый" метод всплывающей подсказки, который вызывается при первом показе всплывающей подсказки и устанавливает его всплывающий элемент.

Прикрепите наш обработчик:

tooltip.popup.bind("open", function (e) {
    // Figure out position...
    var tooltipPosition = isTooltipInBounds();
    console.log(tooltipPosition);

    // Map tooltip position to Popup position using mapping defined inside Tooltip widget code...
    var popupPosition = mapTooltipPostionToPopPosition(tooltipPosition);

    // Set position of Popup before it is shown.
    e.sender.setOptions(popupPosition);
  });

Это делает несколько вещей:

1. Выполняя свою логику для определения положения подсказки, которую я подделал с помощью генератора случайных чисел для забавы. Вам нужно каким-то образом получить цель всплывающей подсказки, чтобы выполнить свою реальную логику.

   function isTooltipInBounds() {
       var tooltipPosition;
       switch (Math.floor(Math.random() * 2) + 1) {
           case 1:
             tooltipPosition = "left";
             break;
           case 2:
             tooltipPosition = "right";
             break;
       };
   
       return tooltipPosition;
   }
   

2. HACK # 2: отображение положения всплывающей подсказки в положение всплывающего окна. Внутренне Tooltip делает это во время _initPopup(), используя массив сопоставлений, который определяется в частном порядке (который я скопировал):

   function mapTooltipPostionToPopPosition(tooltipPosition) {
       var POSITIONS = {
           bottom: {
               origin: 'bottom center',
               position: 'top center'
           },
           top: {
               origin: 'top center',
               position: 'bottom center'
           },
           left: {
               origin: 'center left',
               position: 'center right',
               collision: 'fit flip'
           },
           right: {
               origin: 'center right',
               position: 'center left',
               collision: 'fit flip'
           },
           center: {
               position: 'center center',
               origin: 'center center'
           }
       };
   
     return POSITIONS[tooltipPosition];
   }
   

3. Передает конфигурацию позиции Popup в Popup с помощью setOptions.

Увидеть это в действии (кендо додзё)

Поскольку для этого используется пара внутренних / частных структур из исходного кода виджета "Подсказка", он хрупок и может сломаться при изменении Kendo.

Это также требует немного CSS, и т.д., чтобы это выглядело лучше и еще много чего.

Если бы я искал эту функцию, я бы отправил заявку в службу поддержки Kendo, спрашивая, возможно ли это, поскольку они могут быть очень полезными, даже если мы пытаемся делать неподдерживаемые вещи... но я платящий клиент, так что я могу не будет возможно для вас.