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.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; }
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)