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
}
3 respuestas
Prueba esto, ejemplo para arriba
.tooltip.top .tooltip-arrow {
border-top-color: red!important;
}
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;
}
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;
}
Preguntas relacionadas
Nuevas preguntas
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.