Witam
mam nowy boostrap wersja 4 i chciałbym zmodyfikować wygląd tooltopa.
To mój kod aktualny.
.tooltip-inner {
max-width: 200px;
padding: 3px 8px;
color: #fff;
text-align: center;
background-color: #000;
border-radius: .25rem;
}
.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {
margin-left: -3px;
content: "";
border-width: 5px 5px 0;
border-top-color: #000;
}
.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip.bs-tooltip-right .arrow::before {
margin-top: -3px;
content: "";
border-width: 5px 5px 5px 0;
border-right-color: #000;
}
.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .tooltip.bs-tooltip-bottom .arrow::before {
margin-left: -3px;
content: "";
border-width: 0 5px 5px;
border-bottom-color: #000;
}
.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before, .tooltip.bs-tooltip-left .arrow::before {
right: 0;
margin-top: -3px;
content: "";
border-width: 5px 0 5px 5px;
border-left-color: #000;
}
A ze starej wersji boostrapa mam taki kod i tak właśnie chciałbym aby wyglądał ten tootip
a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
width:140px;
color: #2F4475;
background: #C5D2D9;
height: 24px;
line-height: 24px;
text-align: center;
visibility: hidden;
border-radius: 5px;
box-shadow: 0px 0px 5px #6A7680;
}
a.tooltips span:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-top: 8px solid #C5D2D9;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.5;
bottom: 30px;
left: 50%;
margin-left: -76px;
z-index: 999;
}
Proszę o pomoc jak zmodyfikować pierwszy kod aby tootlip wyglądał jak z drugiego kodu.