[css] Styling the arrow on bootstrap tooltips

.tooltip{
    position:absolute;
    z-index:1020;
    display:block;
    visibility:visible;
    padding:5px;
    font-size:11px;
    opacity:0;
    filter:alpha(opacity=0)
}
.tooltip.in{
    opacity:.8;
    filter:alpha(opacity=80)
}
.tooltip.top{
    margin-top:-2px
}
.tooltip.right{
    margin-left:2px
}
.tooltip.bottom{
    margin-top:2px
}
.tooltip.left{
    margin-left:-2px
}
.tooltip.top .tooltip-arrow{
    bottom:0;
    left:50%;
    margin-left:-5px;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-top:5px solid #000
}
.tooltip.left .tooltip-arrow{
    top:50%;
    right:0;
    margin-top:-5px;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
    border-left:5px solid #000
}
.tooltip.bottom .tooltip-arrow{
    top:0;
    left:50%;
    margin-left:-5px;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-bottom:5px solid #000
}
.tooltip.right .tooltip-arrow{
    top:50%;
    left:0;
    margin-top:-5px;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
    border-right:5px solid #000
}
.tooltip-inner{
    max-width:200px;
    padding:3px 8px;
    color:#fff;
    text-align:center;
    text-decoration:none;
    background-color:#000;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px
}
.tooltip-arrow{
    position:absolute;
    width:0;
    height:0
}

Examples related to css

• need to add a class to an element • Using Lato fonts in my css (@font-face) • Please help me convert this script to a simple image slider • Why there is this "clear" class before footer? • How to set width of mat-table column in angular? • Center content vertically on Vuetify • bootstrap 4 file input doesn't show the file name • Bootstrap 4: responsive sidebar menu to top navbar • Stylesheet not loaded because of MIME-type • Force flex item to span full row width

Examples related to twitter-bootstrap

• Bootstrap 4: responsive sidebar menu to top navbar • CSS class for pointer cursor • How to install popper.js with Bootstrap 4? • Change arrow colors in Bootstraps carousel • Search input with an icon Bootstrap 4 • bootstrap 4 responsive utilities visible / hidden xs sm lg not working • bootstrap.min.js:6 Uncaught Error: Bootstrap dropdown require Popper.js • Bootstrap 4 - Inline List? • Bootstrap 4, how to make a col have a height of 100%? • Bootstrap 4: Multilevel Dropdown Inside Navigation

Examples related to tooltip

• Add tooltip to font awesome icon • Adding a tooltip to an input box • Tooltip with HTML content without JavaScript • HTML-Tooltip position relative to mouse pointer • Styling the arrow on bootstrap tooltips • How do you change the width and height of Twitter Bootstrap's tooltips? • Can I use complex HTML with Twitter Bootstrap's Tooltip? • Tooltip on image • Show data on mouseover of circle • How to add a tooltip to an svg graphic?