Dynamically adjusting Kendo UI tooltip position?

Question

I surprisingly have not found anything on this issue while googling around for it. My use case seems fairly straight forward, the kendo ui tooltip overflows the window if it should go out of the window.

So, I want to keep the tooltips to the right or left of my elements. I have the tooltip set up like this:

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');

Where isTooltipInBounds checks if the tooltip goes off the right or left side of the window, and returns the opposite direction, which I want the tooltip to be on to avoid any overflow.

So, for the case where the tooltip extends off the right side of the window, it returns left. So I setOptions and put position as 'left', but the tooltip does not change positions.

I am not sure of how I may be able to dynamically change the position setting of the tooltip to the side of my element that has space for it. Does anyone know how you might do this?

Answer 1

I'm hesitant to post this answer as it is a bit hack-y and uses bits of non-public-api/private code of the Tooltip widget, and requires polishing to be remotely production, but...

The problem with your current code is that the show event of the Tooltip fires after the Tooltip is already shown, so attempting to change the position here is too late.

There is no built-in beforeShow event on the Tooltip.

But, internally the Tooltip is using a Popup widget(Popup widget documentation).

The Popup widget has an open event that does fire before the Popup is shown, which is also cancel-able FYI.

So, if you can attach a handler to the open event of the Tooltip's internal Popup, you can make changes to the Popup before it is shown.

Unfortunately, the internal Popup widget of the Tooltip is not constructed until the Tooltip is shown for the first time, which makes it difficult to attach the handler when you setting up Your Tooltip.

Initialize the Tooltip:

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

HACK #1, force the creation of the internal Popup widget so that we can attach our handler to its open event:

tooltip._initPopup();

This uses a "private" method of the Tooltip that it calls the first time the Tooltip is shown and sets up its popup member.

Attach our handler:

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

This is doing a few things:

1. Performing your logic for determining the position of the Tooltip, which I have faked with a random number generator for fun. You will need to somehow get the tooltip target in here to perform your actual logic.

   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: Mapping the Tooltip position to Popup position. Internally, the Tooltip does this during _initPopup() using a mapping array that is defines privately(which I have copied):

   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. Passes the Popup position config to the Popup using setOptions.

See it in action(Kendo Dojo)

Since this is using a couple of internal/private structures from inside the Tooltip widget source code, it is fragile and subject to breaking if Kendo changes.

It also requires some CSS, etc to make it look nicer and whatnot.

If this was me looking for this functionality, I would submit Kendo support ticket asking if it was possible as they can be super helpful, even if we are trying to do unsupported things....but I'm a paying customer so that may not be possible for you.