Different style (margin) based on position setting

2 posts, 0 answers
  1. Jason
    Jason avatar
    44 posts
    Member since:
    Apr 2013

    Posted 01 Nov 2013 Link to this post

    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.

  2. Dimo
    Dimo avatar
    8485 posts

    Posted 01 Nov 2013 Link to this post

    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.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top