Aquí está el código plunker. http://plnkr.co/edit/C1khFJqTUutDaK9ad7ud?p=preview

Necesito cambiar la flecha de información sobre herramientas. La posición de la información sobre herramientas en el ejemplo es superior, inferior e izquierda.

¿Alguien puede decirme cómo diseñar estas informaciones sobre herramientas? Necesito colorear la flecha de información sobre herramientas de manera diferente para diferentes ubicaciones de información sobre herramientas.

Por ejemplo

tooltip at top-> arrow color should be red
tooltip at bottom-> arrow color green
tooltip at left-> arrow color yellow

¿Alguien puede decirme cómo obtener esas clases y aplicar el color a estas informaciones sobre herramientas?

Aquí está el código

Html

<div ng-controller="TooltipDemoCtrl">
<br><br><br>
  <div ng-class="{'has-error' : !inputModel}">
    <input type="text" ng-model="inputModel" class="test"
      uib-tooltip="Tooltip TBD"
      tooltip-placement="top"
      tooltip-trigger="mouseenter"
      tooltip-enable="!inputModel" />
  </div>
</div>

Css

.tooltip .tooltip-inner {
            color: white;
            background-color: blue;
            border-radius:5px;
}

.tooltip .tooltip-arrow { 
          //cant get the class for the arrow

}
6
Ayesha 11 dic. 2015 a las 01:23

3 respuestas

La mejor respuesta

Prueba esto, ejemplo para arriba

.tooltip.top .tooltip-arrow {
    border-top-color: red!important;
}
8
Bata 10 dic. 2015 a las 22:42

Actualización de la respuesta con respecto a batas. Esto funcionó para mí.

.tooltip.top .tooltip-arrow {
border-top-color: red!important;
}
.tooltip.bottom .tooltip-arrow {
border-bottom-color: green!important;
}
.tooltip.left .tooltip-arrow {
border-left-color: yellow!important;
}
2
Ayesha 10 dic. 2015 a las 23:05

Puedes usar tooltip-class me pareció más conveniente
http://plnkr.co/edit/FVTuepTS7gXL3K2ixR8e?p=preview

Html:

<div ng-controller="TooltipDemoCtrl">
<br><br><br>
  <div ng-class="{'has-error' : !inputModel}">
    <input type="text" ng-model="inputModel" class="test"
      uib-tooltip="Tooltip TBD"
      tooltip-class="tooltip-class"
      tooltip-trigger="mouseenter"
      tooltip-enable="!inputModel" />
  </div>
</div>

Css

.tooltip-class .tooltip-arrow{
     border-top-color: red !important;
}
0
omer 15 feb. 2018 a las 10:10
34212825