cambiar el color de la flecha de información sobre herramientas de ui.bootstrap (plunker adjunto)

Question

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

}

javascript jquery css angularjs angular-ui-bootstrap

6

Ayesha 11 dic. 2015 a las 01:23

Answer 1

Prueba esto, ejemplo para arriba

.tooltip.top .tooltip-arrow {
    border-top-color: red!important;
}

8

Bata 10 dic. 2015 a las 22:42

Answer 2

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

Answer 3

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

cambiar el color de la flecha de información sobre herramientas de ui.bootstrap (plunker adjunto)

3 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript