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

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

Preguntas relacionadas

10 Cómo cambiar el href para un hipervínculo usando jQuery
30 ¿Cómo puedo cambiar la clase de un elemento con JavaScript?
25 Agregar una información sobre herramientas a un div

Nuevas preguntas

3 ¿Cómo llamar a la función async en useEffect después de enviar en react native?
3 mangosta .save () no es una función
3 Filtrar una matriz de objetos según varios términos de búsqueda
3 Atravesar un árbol (recursivo) que contiene propiedades en forma de valores ordinarios y objetos y matrices
4 Cómo escribir dinámicamente en Javascript (proyecto react)
4 ¿Cómo agregar comas a una cadena entre caracteres que no son iguales?
3 Los componentes secundarios de React no se vuelven a renderizar cuando se asignan desde una matriz
3 Cómo retrasar la ejecución de la función JS hasta 5 segundos después de que se cargue la página
3 ¿Cómo filtrar valores indefinidos de Array JavaScript?
3 Convertir JavaScript Array [a, b, c, d, e] en [a + b, b + c, c + d, d + e] de forma dinámica
Nuevas preguntas con la etiqueta javascript >

javascript

Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.

Más sobre javascript...