CODEWITHSUNDEEP
javascriptcssangularjstwitter-bootstrap
Pille
Pille

Reputation: 1133

Change standard position of tooltip if hovered/active in angular

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.

Upvotes: 3

Views: 11425

Answers (3)

cabaji99
cabaji99

Reputation: 1445

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

Upvotes: 0

Pille
Pille

Reputation: 1133

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.

Upvotes: 2

Vaibhav Jain
Vaibhav Jain

Reputation: 34407

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.com/angular-ui/bootstrap/blob/master/src/tooltip/docs/readme.md

Upvotes: 4

Related Questions