With bootstrap 4.5.3 I make tooltip and I want to change default appearence.
With my styles defined :
.tooltip {
display: flex;
justify-content: flex-start;
position: absolute;
z-index: 9999;
background: #ddff9d;
color: #333333;
width: 320px;
-webkit-box-shadow: 5px 5px 5px 5px white;
box-shadow: 2px 2px 2px 2px white;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-border-radius: 8px;
opacity: 1 !important;
padding: 10px;
text-align: left;
}
.tooltip-inner {
background-color: #00acd6 !important;
/*!important is not necessary if you place custom.css at the end of your css calls. For the purpose of this demo, it seems to be required in SO snippet*/
color: #fff;
}
.tooltip.top .tooltip-arrow {
border-top-color: #00acd6;
}
.tooltip.right .tooltip-arrow {
border-right-color: #00acd6;
}
.tooltip.bottom .tooltip-arrow {
border-bottom-color: #00acd6;
}
.tooltip.left .tooltip-arrow {
border-left-color: #00acd6;
}
I have :
https://prnt.sc/wlwp1v
and I want how :
Change width of internal (blue) block to fill width+paddings
Set equal paddings of internal block with external
To align text inside of internal block to the left ?
MODIFIED BLOCK:
That is actually fullcalendar 3.9 component and tooltip is rendered on fly with javascript code:
eventRender: function (eventInfo, element, view) {
let adHtml = '<b>' + eventInfo.title + "</b><br> " +
'<u>{!! showAppIcon('expire_date') !!} Expired at : ' + eventInfo.start_formatted + '</u><br>'+
'{!! showAppIcon('location') !!} ' + eventInfo.adLocationsCount + ' location(s)<br>' +
'<small>Status : ' + eventInfo.status_label + "</small><br>" +
'<small>' + eventInfo.description + "</small>"
let tooltipOptions = {
title: adHtml,
html: true
}
element.tooltip(tooltipOptions)
I use this bootstrhttps://bootswatch.com/solar as template...
I can not debug elements in browser's inspactor, as when mouse is hover tooltip is hidden...
Thanks!
To change the width just use: max-width: 400px;. To left-align text just simply use text-align: left;
Replace your whole CSS with the given below:
.tooltip-inner {
text-align: left;
max-width: 400px;
border-radius: 8px;
padding: 20px;
}
Codepen: https://codepen.io/manaskhandelwal1/pen/LYRXzro
Related
To enable angular-loading-bar with different color , I have overwritten the css classes:
#loading-bar .bar {
background: #33ba3a;
height: 4px;
}
#loading-bar-spinner .spinner-icon {
width: 18px;
height: 18px;
border: solid 4px transparent;
border-top-color: #6959A0;
border-left-color: #6959A0;
border-radius: 10px;
}
But somehow, it does not change the bydefault color of angular-loading-bar. So what is the solution to change the color?
This seems to be a fairly common and not-fancy use case, but I haven't run into it before. I set up a pen, but can't replicate it there, and I'm pulling my hair out trying to figure out why.
Demo Pen
The left sidebar has a custom scroll-window for a list of items, but though setting overflow-y: scroll gives me a nice scrollable list, it also creates a huge block of whitespace equal to the height of the list on the left if overflow-y wasn't set to scroll. This whitespace is outside of the HTML tag (and because that blue background stops). So it appears there's something going on with height calculations, but I just don't know what else I can play with.
In my app, I've tried commenting out both the overflow-y and display: grid on my content wrapper, and upon doing either, the whitespace disappears. But of course I need both of these properties. Do I need to set another height somewhere?
I found the issue finally! Had to do with absolutely-positioned elements. I'm using custom checkboxes to do a filled square instead of the browser's defaults, and part of that code (which I borrowed and modified) was to set the input itself to position:absolute which took it out of normal flow of course (hence why my 100vh wasn't making a difference). Adding simply top: 0 fixed it all. I'd love if somebody could explain why setting top to its default value makes a difference here.
HTML (Angular)
<li class="flex justify-between" *ngFor="let error of hardSummary">
<input class="m-checkbox" id="{{'h' + error.errorCode}}" type="checkbox" [(ngModel)]="error.isChecked" (click)="filterByError(error)">
<label for="{{'h' + error.errorCode}}">
{{error.errorCode}}
</label>
<span>{{error.count}}</span>
</li>
SCSS:
.m-checkbox {
position: absolute;
opacity: 0; // hide it
top: 0; // <<<<<<< THIS IS ALL THAT I NEEDED TO ADD
& + label {
position: relative;
cursor: pointer;
padding: 0;
}
// Box.
& + label:before {
content: '';
margin-right: 4px;
display: inline-block;
vertical-align: text-top;
width: 20px;
height: 20px;
background: #f4f4f4;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 3px;
}
// Box hover
&:hover + label:before {
background: #d8d8d8;
}
// Box focus
&:focus + label:before {
border: 1px solid #666;
}
// Box checked
&:checked + label:before {
background: #448aff;
}
// Disabled state label.
&:disabled + label {
color: #b8b8b8;
cursor: auto;
}
// Disabled box.
&:disabled + label:before {
box-shadow: none;
background: #ddd;
}
// Checkmark. Could be replaced with an image
&:checked + label:after {
content: '';
position: absolute;
left: 5px;
top: 11px;
background: white;
width: 2px;
height: 2px;
box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
transform: rotate(45deg);
transition: all 0.2s;
}
}
In my form validation I'm using bootstrap tooltips to show
error message.
I adjusted the css to change the appearance (img 1)
/* Tooltip */
form .tooltip > .tooltip-inner {
background-color: #843534;
color: #FFFFFF;
border: 0px;
padding: 0 4px;
font-size: 9px;
letter-spacing: 0.5px;
}
.tooltip.bottom {
padding: 0px !important;
margin-top: -6px !important;
}
/* Tooltip arrow */
form .tooltip.top > .tooltip-arrow,
form .tooltip.bottom > .tooltip-arrow,
form .tooltip.left > .tooltip-arrow,
form .tooltip.right > .tooltip-arrow {
border: 0px;
}
I would place my tooltip to the left of the element as in img 2,
but I haven't found a way to do it. (bottom-left not working)
Bootply
How would I do it?
Thank you
According your pen, just add this css to your css
.tooltip.fade.bottom
{
left:30px !important;
}
I just use !important to override the current left value and you will get your result.
Please add the following in your css:
.tooltip{
left:20px !important;
}
modify css like below,
form .tooltip > .tooltip-inner {
background-color: #843534;
color: #FFFFFF;
border: 0px;
padding: 0 0px;
font-size: 9px;
letter-spacing: 0.5px;
margin-left: -352px;
}
.tooltip-inner {
max-width: 85px;
text-align: center;
border-radius: 4px;
}
This question already has answers here:
How to change the button text of <input type="file" />?
(23 answers)
Closed 7 years ago.
I'm not wanting to completely restyle the file upload button, I'd just like to change what the button says. Is there a way to do this?
Yes, you can customize using "label" tag and pseudo selector.
Plus: use javascript to display the filename.
http://jsbin.com/luruqo/5/edit?html,css,js,output
The base is:
/*Hide the current input file*/
input[type="file"] {
display: none;
}
/*Show the label as custom button*/
input[type="file"]+label[for] {
background-color: #0af;
color: #fff;
padding: 4px;
}
/*Prepare pseudoelement to display file selected (when input change set the title to label with js)*/
input[type="file"]+label[for]:after {
content: attr(title);
padding: 4px;
}
Here the complete snippet:
function filechange() {
var f = (this.files[0] || this.value);
document.getElementById('labelfor' + this.id).title =
(f.name || f.fileName || f.replace('C:\\fakepath\\', ''));
}
body {
font-family: arial;
}
.field input[type=file] {
display: none;
}
.field input[type=file] + label[for] {
font-size: 12px;
}
.field input[type=file] + label[for]:before {
content: attr(label);
border: solid 1px #0af;
padding: 3px 10px;
border-radius: 3px;
background-color: #def;
color: #555;
cursor: pointer;
box-shadow: none;
margin-right: 2px;
}
.field input[type=file] + label[for]:hover:before {
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.4);
color: #dfdfdf;
background-color: #0af;
}
.field input[type=file] + label[for]:active:before {
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.4);
color: #fff;
}
.field input[type=file] + label[for]:after {
padding: 3px 10px;
content: attr(title);
}
<div class="field">
<input type="file" id="file1" onchange="filechange.call(this,event);">
<label id="labelforfile1" for="file1" label="Select a file:"></label>
</div>
I've been trying to apply carets to input-group elements in Bootstrap 3. Failing so far. Tried using table-cell display for the inserted pseudo element, tried absolute positioning, tried using the content property to display a web font caret instead of my preferred CSS triangle caret. Just can't wrap my head around this one.
Here's a JSFiddle (the red borders being where I'd expect the caret to show).
.input-group .input-group-addon:last-child:before,
.input-group .input-group-btn:last-child:before,
.input-group .input-group-addon:not(:last-child):before,
.input-group .input-group-btn:not(:last-child):before {
position: absolute;
content: '';
width: 0;
height: 0;
border: 10px solid transparent;
margin: auto;
top: 0;
bottom: 0;
z-index: 1000;
}
.input-group .input-group-addon:last-child:before,
.input-group .input-group-btn:last-child:before {
border-right-color: red;
right: 0;
}
.input-group .input-group-addon:not(:last-child):before,
.input-group .input-group-btn:not(:last-child):before {
border-left-color: red;
left: 0;
}
EDIT : Based on an answer, I modified the styles which now work fine in all but IE10 and below. IE offsets left-aligned input-group carets by 4px as can be seen here http://jsfiddle.net/W8mFS/3/. Any ideas how to fix this up?
The updated CSS:
.input-group.input-group-caret span:after,
.input-group.input-group-caret > input + span:before {
position: absolute;
content: '';
width: 0;
height: 0;
top: 0;
bottom: 0;
margin: auto;
border: 10px solid transparent;
}
.input-group.input-group-caret > input + span:before {
border-right-color: #cccccc;
margin-left: -20px;
}
.input-group.input-group-caret > input + span:empty:before {
margin-left: -44px;
}
.input-group.input-group-caret > input + span:after {
border-left-color: transparent;
}
.input-group.input-group-caret span:after {
border-left-color: #cccccc;
}
.input-group.input-group-caret .input-group-addon {
padding: 0;
}
.input-group.input-group-caret .input-group-addon i {
font-style: normal;
margin-left: 12px;
padding-right: 12px;
}
.input-group.input-group-caret .input-group-addon:empty {
padding-left: 24px;
}
UPDATE : With added input-group sizing JSFiddle here: http://jsfiddle.net/W8mFS/4/.
The LESS code shows the use of Bootstrap variables to control caret size, margins and padding:
#import "path_to_bootstrap/less/mixins";
#import "path_to_bootstrap/less/variables";
// input-group caret size
#caret-size-base: ceil(#font-size-base * 0.70); // ~10px;
#caret-size-large: ceil(#caret-size-base * 1.20); // ~12px;
#caret-size-small: ceil(#caret-size-base * 0.80); // ~8px;
// input-group caret
.input-group.input-group-caret {
span:after,
> input + span:before {
position: absolute;
content: '';
width: 0;
height: 0;
// v-align to middle
top: 0;
bottom: 0;
margin: auto;
border: #caret-size-base solid transparent;
}
> input + span:before { border-right-color: #input-border; margin-left: -( 2 * #caret-size-base ); } // right aligned
> input + span:empty:before { margin-left: -(( 2 * #padding-base-horizontal ) + ( 2 * #caret-size-base )); } // right aligned
> input + span:after { border-left-color: transparent; } // right aligned
span:after { border-left-color: #input-border; } // left aligned
// sizing
&.input-group-sm {
span:after,
> input + span:before {
border: #caret-size-small solid transparent;
}
> input + span:before { border-right-color: #input-border; margin-left: -( 2 * #caret-size-small ); } // right aligned
> input + span:empty:before { margin-left: -(( 2 * #padding-base-horizontal ) + ( 2 * #caret-size-small )); } // right aligned
> input + span:after { border-left-color: transparent; } // right aligned
span:after { border-left-color: #input-border; } // left aligned
}
&.input-group-lg {
span:after,
> input + span:before {
border: #caret-size-large solid transparent;
}
> input + span:before { border-right-color: #input-border; margin-left: -( 2 * #caret-size-large ); } // right aligned
> input + span:empty:before { margin-left: -(( 2 * #padding-base-horizontal ) + ( 2 * #caret-size-large )); } // right aligned
> input + span:after { border-left-color: transparent; } // right aligned
span:after { border-left-color: #input-border; } // left aligned
}
// input-group caret alignment fixes
.input-group-addon {
padding: 0;
i {
font-style: normal;
margin-left: #padding-base-horizontal;
padding-right: #padding-base-horizontal;
}
// fix-up alignment of empty addon
&:empty {
padding-left: 2 * #padding-base-horizontal;
}
}
}
It seems .input-group > input + span:before will be a good selector for Right Aligned. But there will also be the problem that box-sizing : border-box (Why did Bootstrap 3 switch to box-sizing: border-box?) breaks the carets / forms. (width include :after and :before too?)
see: http://bootply.com/83702
.input-group > input + span:before {
display: inline-block;
width: 0;
height: 0;
border-right: 10px solid red;
border-top: 10px solid transparent;
border-left: 0 dotted;
border-bottom: 10px solid transparent;
vertical-align: middle;
margin-left: 2px;
content:'';
}