Template tooltip off screen

[Keith]

Hi

I've got a slight issue which only comes to light when running the production version of my application.

I have an anchor element which is near to the top of the screen, the tooltip is generated using a template and displays the content correctly when hovering over the anchor. If the content of the tooltip exceeds the available space to the top of the screen, in development it flips the tooltip to display under the anchor. Unfortunately this does not happen when released, the tooltip fails to flip correctly.

Here's my page content

<ng-template #templateMetricTooltip>
    <div class="metric-tooltip-content">
        <div class="name">{{metric.name}}</div>
        <div class="description">{{ metric.description }}</div>

        <div class="section">Calculation</div>
        <div class="formula">{{metric.formula}}</div>
      </div>
</ng-template>

<div class="name" kendoTooltip [tooltipTemplate]="templateMetricTooltip" tooltipClass="metric-tooltip" style="cursor: pointer">
    <span [title]="metric" class="dotted">{{ caption.trim() }}</span>
</div>

 

The variable metric being referenced in the template, is declared in my controller class. As I said,there is no problem with the content of the tooltip, it's the position when compiled to production. Is there any workaround to delay the positioning of the tooltip until after the content has been rendered?

Thanks
Keith

[Svet]

Hi Keith,

Usually, when there are differences between an app deployed for production and its development version, the cause for the issue is a difference in the versions of the used packages. Make sure, that both applications for production and development use the same packages. Basically, we recommend using the latest official version of each Kendo Ui for Angular package as they contain the latest features and bug fixes. The change log article of each component demonstrates the available versions. Check the change log of the Tooltip for example:
https://www.telerik.com/kendo-angular-ui/components/tooltip/changelog/

Make sure, that the node_modules folder and package-json file are removed before re-installing the dependencies.

I hope this helps. Let us know in case further assistance is required for this case.

Regards,
Svetlin
Progress Telerik

[Keith]

Hi

Thanks for the help - you were correct. Once I'd deleted the tooltip and popup folders from node_modules and restored, everything is working as expected.

Regards
Keith