CODEWITHSUNDEEP
jquerycssjquery-ui
discodowney
discodowney

Reputation: 1507

Setting the position of the jQuery UI tooltip dynamically

So I have the following code. I am trying to get tooltips with arrows from the elements they belong to.

var topPosition = { my: 'center bottom', at: 'center top-10' };
var bottomPosition = { my: 'center top', at: 'center bottom+10' };
$(document).tooltip
({
    tooltipClass: 'top',
    position: topPosition,
    open: function(e,ui){
        var topOfToolTip = ui.tooltip.offset().top;
        var elem = $(e.originalEvent.target);
        if (elem.offset().top < topOfToolTip) {
            pos = {my: 'center top', at: 'center bottom+10'};
            ui.tooltip.position(pos);
            ui.tooltip.addClass("bottom");              
        }           
    } 
});

Then I have the following css:

.ui-tooltip-content {
    position: relative;
    padding: 1em;
}
.ui-tooltip-content::after {
    content: '';
    position: absolute;
    border-style: solid;
    display: block;
    width: 0;
}

.top .ui-tooltip-content::after {
    bottom: -10px;
    border-color: #666 transparent;
    border-width: 10px 10px 0;    
}

.bottom .ui-tooltip-content::after {
    top: -10px;
    border-color: #666 transparent;
    border-width: 0 10px 10px;
}

So in the code I check if there isnt enough room for the tooltip above the element then I want it to show below. Fine, that works. But my problem is that when that happens the arrow is pointing in the wrong direction. If I manually change the class and the position to use bottom values then it works below but not when I try to get the tooltip to show above.

So the issue is that the position doesnt seem to be setting. So can someone tell me how I do this?

Upvotes: 1

Views: 12479

Answers (1)

Twisty
Twisty

Reputation: 30893

As I commented, making use of the position option, and the using attribute can handle this with a few changes to your CSS.

Working Example: https://jsfiddle.net/vmmsb9vx/1/

HTML

<p><a href="#" title="That&apos;s what this widget is">Tooltips</a> can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with
  <a href="http://jqueryui.com/themeroller/" title="ThemeRoller: jQuery UI&apos;s theme builder application">ThemeRoller</a> will also style tooltips accordingly.</p>
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
<p>
  <label for="age">Your age:</label>
  <input id="age" title="We ask for your age only for statistical purposes.">
</p>
<p>Hover the field to see the tooltip.</p>

CSS

.ui-tooltip-content {
  position: relative;
  padding: 1em;
}

.ui-tooltip-content::after {
  content: '';
  position: absolute;
  border-style: solid;
  display: block;
  width: 0;
}

.top .ui-tooltip-content::after {
  top: -10px;
  bottom: auto;
  border-color: #666 transparent;
  border-width: 0 10px 10px;
}

.bottom .ui-tooltip-content::after {
  bottom: -10px;
  border-color: #666 transparent;
  border-width: 10px 10px 0;
}

jQuery

$(document).tooltip({
  position: {
    my: 'center bottom-20',
    at: 'center top',
    using: function(position, feedback) {
      console.log(feedback);
      $(this).css(position);
      $(this).addClass(feedback.vertical);
    }
  }
});

You can see the correct class top or bottom added to your Tooltip based on the feedback. I adjusted your CSS so the arrow pointed the right way in each scenario.

Upvotes: 3

Related Questions