For example, the left that comes out by default, try modifying the file bootstrap.css and bootstrap.min.css and I did not get a response.
How do I remove the styles of a bootstrap tooltip? [closed]
0
3 answers
0
It is not recommended to touch the bootstrap source. What we are used to is to create a completely separate css with our own styles (styles.css) there are placed all the changes to bootstrap styles (adaptations to your system) and new styles that you design.
Alternative 1:
What you do is that where you are interested in having the "edited" bootstrap styles you load your styles.css just after the bootstrap one. So:
<link type="text/css" href="../css/bootstrap.css" rel="stylesheet"/>
<link type="text/css" href="../css/estilos.css" rel="stylesheet"/>
where href is the url that you have relative or absolute (how you use it) of your project where the style files are located. In this way bootstrap styles are loaded first and styles are included. Css just after "existing" bootstrap classes are modified with your preferences plus the new classes you own.
Example:
File bootstrap.css you have the red button that indicates "warning" or critical process whose class in css is represented by "btn" (attribute that gives shape to the button) in conjunction with "danger" (which gives the color red and others):
.btn-danger {
color: #fff;
background-color: #d9534f;
border-color: #d43f3a;
}
But you do not want it to be that red tone, much less that the letters on the button are white because it does not match with your system, instead you want the black letters and an intense red tone ... So for modify this simply in estilo.css you place:
.dangermod {
color: #000;
background-color: #ff0000;
}
Notice that the border-color attribute that appears in the bootstrap stylesheet did not touch it in our stylesheet (styles.css) that indicates that? because it will default to the bootstrap configuration since we do not modify it.
Then the button in html would be:
<button type="submit" class="btn btn-danger dangermod"> Boton</button>
Alternative 2:
On the other hand, it is also accepted that if the style change is negligible (as your example refers it is only the change of an attribute of the class) and also do not think about repeating it in all the other forms or files you can include in the one of that form the modified style so that it only saves it or uses that file nothing more. In this way in:
<head>
<style type="text/css">
.dangermod {
color: #000;
background-color: #ff0000;
border-color: #ffffff;
}
</style>
</head>
<body><button type="button" class="btn dangermod"></body>
Alternative 3:
You put the modified style directly in the element (not recommended). Following the example of the button would be like this:
<body>
<button type="button" class="btn-danger" style="background-color:#ff0000; color: #000;"> Boton</button>
</body>
In this way, you can edit the style only in that element and adapt it, but without altering the source of the bootstrap that I repeat, it is not advisable to modify it.
Alternative 4: If none of the above works for you, it is not necessary to add this class to your styles file (recommended) or to the direct file that you want to modify (it is not recommended):
.resetear {
animation : none;
animation-delay : 0;
animation-direction : normal;
animation-duration : 0;
animation-fill-mode : none;
animation-iteration-count : 1;
animation-name : none;
animation-play-state : running;
animation-timing-function : ease;
backface-visibility : visible;
background : 0;
background-attachment : scroll;
background-clip : border-box;
background-color : transparent;
background-image : none;
background-origin : padding-box;
background-position : 0 0;
background-position-x : 0;
background-position-y : 0;
background-repeat : repeat;
background-size : auto auto;
border : 0;
border-style : none;
border-width : medium;
border-color : inherit;
border-bottom : 0;
border-bottom-color : inherit;
border-bottom-left-radius : 0;
border-bottom-right-radius : 0;
border-bottom-style : none;
border-bottom-width : medium;
border-collapse : separate;
border-image : none;
border-left : 0;
border-left-color : inherit;
border-left-style : none;
border-left-width : medium;
border-radius : 0;
border-right : 0;
border-right-color : inherit;
border-right-style : none;
border-right-width : medium;
border-spacing : 0;
border-top : 0;
border-top-color : inherit;
border-top-left-radius : 0;
border-top-right-radius : 0;
border-top-style : none;
border-top-width : medium;
bottom : auto;
box-shadow : none;
box-sizing : content-box;
caption-side : top;
clear : none;
clip : auto;
color : inherit;
columns : auto;
column-count : auto;
column-fill : balance;
column-gap : normal;
column-rule : medium none currentColor;
column-rule-color : currentColor;
column-rule-style : none;
column-rule-width : none;
column-span : 1;
column-width : auto;
content : normal;
counter-increment : none;
counter-reset : none;
cursor : auto;
direction : ltr;
display : inline;
empty-cells : show;
float : none;
font : normal;
font-family : inherit;
font-size : medium;
font-style : normal;
font-variant : normal;
font-weight : normal;
height : auto;
hyphens : none;
left : auto;
letter-spacing : normal;
line-height : normal;
list-style : none;
list-style-image : none;
list-style-position : outside;
list-style-type : disc;
margin : 0;
margin-bottom : 0;
margin-left : 0;
margin-right : 0;
margin-top : 0;
max-height : none;
max-width : none;
min-height : 0;
min-width : 0;
opacity : 1;
orphans : 0;
outline : 0;
outline-color : invert;
outline-style : none;
outline-width : medium;
overflow : visible;
overflow-x : visible;
overflow-y : visible;
padding : 0;
padding-bottom : 0;
padding-left : 0;
padding-right : 0;
padding-top : 0;
page-break-after : auto;
page-break-before : auto;
page-break-inside : auto;
perspective : none;
perspective-origin : 50% 50%;
position : static;
quotes : '1C' '1D' '18' '19';
right : auto;
tab-size : 8;
table-layout : auto;
text-align : inherit;
text-align-last : auto;
text-decoration : none;
text-decoration-color : inherit;
text-decoration-line : none;
text-decoration-style : solid;
text-indent : 0;
text-shadow : none;
text-transform : none;
top : auto;
transform : none;
transform-style : flat;
transition : none;
transition-delay : 0s;
transition-duration : 0s;
transition-property : none;
transition-timing-function : ease;
unicode-bidi : normal;
vertical-align : baseline;
visibility : visible;
white-space : normal;
widows : 0;
width : auto;
word-spacing : normal;
z-index : auto;
}
Luego donde tienes el tooltip (que según tu imagen veo que es en el div) colocas en su clase este estilo .resetear de último y así devuelves todo a formato por "defecto" o "reseteas" los estilos del elemento. Que es la respuesta exacta a tu pregunta.
answered by 29.12.2017 / 14:34
source
0
Detecting the events and making changes with them. I take as a reference the latest version of Bootstrap but it is always the same functioning but changing some details of events name we always arrive at the same result.
$('#myTooltip').on('shown.bs.tooltip', function () {
$(this).css({
'left': 0,
'top': 0
});
})
answered by
29.12.2017 в 04:59
0
friend now I get it right only in the code number the whole table occupies me and runs the rest on the right
Friend now doing tests I saw that it was the display, I put it on display: table-caption; And so, like in the second image, but it does not look good to reset it, I put it in
answered by
03.01.2018 в 05:43