Is it possible to change the standard positioning of a tooltip?

In my case, when using "bottom" I would like the tooltip to be a bit higher within the area which activated the toolip.

I searched along and did not find the part within bootstrap or bootstrap-templates where this values are set.

I guess I have to use the $tooltipProvider to change behaviour.

Please see my plunkr: As you can see, the tooltip shows up at the wrong place.

Is it possible to change the standard positioning of a tooltip?

In my case, when using "bottom" I would like the tooltip to be a bit higher within the area which activated the toolip.

I searched along and did not find the part within bootstrap or bootstrap-templates where this values are set.

I guess I have to use the $tooltipProvider to change behaviour.

Please see my plunkr: http://plnkr.co/edit/neSprkPssboCiHzM4uE2?p=catalogue As you can see, the tooltip shows up at the wrong place.

• javascript
• css
• angularjs
• twitter-bootstrap

• please add code and/or a fiddle of what you have tried so far. – DonJuwe Commented Feb 28, 2014 at 8:48
• I added a plunkr to show what I mean. – Pille Commented Feb 28, 2014 at 9:01

3 Answers 3

The tooltip directives provide several optional attributes to control how they will display. i.e.

tooltip-placement: Where to place it? Defaults to "top", but also accepts "bottom", "left", "right".

Refer https://github./angular-ui/bootstrap/blob/master/src/tooltip/docs/readme.md

To change the standard behaviour of tooltip placement (left, top, right, bottom), it is best using CSS, for example showing bottom tooltip a little bit higher (as I wanted):

.tooltip.bottom{
margin-top:-80px;
}

In my case, I have a custom.css overwriting the standard bootstrap CSS. You could exchange it there also.

Primeng on my case the tooltip was showing on the left side, cause primeng was doing some calculations and put the tooltipo on the left, yet it was not the requirement. So i moved all the tooltip with css.

.xx-service-tooltip.cb-field__tooltip{
  margin-top: -35px;
  margin-right: 62px;
  margin-left: -62px;

  .p-tooltip-arrow {
    bottom: 0px;
    right: 4%;
    border-width: 0.25em 0.25em 0;
    margin-top: 0;
    top: 96%;
    border-top-color: $blue-02;
    border-bottom: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    left: unset;
  }

}

Of course it is needed to add a custom class on the tooltip with the primeng --> tooltip --> tooltipStyleClass