Different style (margin) based on position setting

[Jason]

I have a series of dynamically created tooltips that are initiated when clicking a small icon. The tooltips all have a default position of "right". To ensure that the tooltip doesn't cover the icon when opening I gave it a bit of a right margin to the outer div of 10px. For the vast majority of the tooltips it works perfectly.  The problem arises when the icon that you click is on the right side of the page, and the tooltip opens to the left of the icon because otherwise it would push off the screen (that I'm guessing is the default behavior). Unfortunatly, when it does open to the left of the icon it still takes on the margin setting and then completely covers the icon that you clicked to open it.

My question is how do I give anything that open on "position right" a different style than items defaulting to the "position left".  I've reviewed the Tooltip API, but don't see anything for a scenario like this.

Thanks,
J

[Dimo]

Hello Jason,

You can use the Tooltip's show event, locate the Tooltip's callout with

function onShow(e) {
   var callout = this.popup.wrapper.find(".k-callout");
}

... and find out the tooltip opening direction by examining the callout's second CSS class, which can be k-callout-w or k-callout-e in your scenario. In the latter case, remove the margin with Javascript.

P.S. Actually, you can directly try to find .k-callout-e and remove the margin if jQuery returns an element.

Regards,
Dimo
Telerik