Skip to content

Instantly share code, notes, and snippets.

@jhesyong
Last active May 24, 2018 11:32
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save jhesyong/6890d35406c3892ac72e to your computer and use it in GitHub Desktop.
Save jhesyong/6890d35406c3892ac72e to your computer and use it in GitHub Desktop.
Add border to bootstrap tooltip
$tooltip-border-color: #ccc;
$tooltip-border-width: 1px;
$tooltip-arrow-border-width: $tooltip-arrow-width + $tooltip-border-width;
.tooltip {
&.top { padding: $tooltip-arrow-border-width 0; }
&.right { padding: 0 $tooltip-arrow-border-width; }
&.bottom { padding: $tooltip-arrow-border-width 0; }
&.left { padding: 0 $tooltip-arrow-border-width; }
}
.tooltip-inner {
border: $tooltip-border-width solid $tooltip-border-color;
}
.tooltip-arrow:after {
content: '';
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
z-index: -1;
}
.tooltip {
&.top .tooltip-arrow {
bottom: 2 * $tooltip-border-width;
&:after {
bottom: -2 * $tooltip-border-width;
left: 50%;
margin-left: -$tooltip-arrow-border-width;
border-width: $tooltip-arrow-border-width $tooltip-arrow-border-width 0;
border-top-color: $tooltip-border-color;
}
}
&.bottom .tooltip-arrow {
top: 2 * $tooltip-border-width;
&:after {
top: -2 * $tooltip-border-width;
left: 50%;
margin-left: -$tooltip-arrow-border-width;
border-width: 0 $tooltip-arrow-border-width $tooltip-arrow-border-width;
border-bottom-color: $tooltip-border-color;
}
}
&.left .tooltip-arrow {
right: 2 * $tooltip-border-width;
&:after {
right: -2 * $tooltip-border-width;
top: 50%;
margin-top: -$tooltip-arrow-border-width;
border-width: $tooltip-arrow-border-width 0 $tooltip-arrow-border-width $tooltip-arrow-border-width;
border-left-color: $tooltip-border-color;
}
}
&.right .tooltip-arrow {
left: 2 * $tooltip-border-width;
&:after {
left: -2 * $tooltip-border-width;
top: 50%;
margin-top: -$tooltip-arrow-border-width;
border-width: $tooltip-arrow-border-width $tooltip-arrow-border-width $tooltip-arrow-border-width 0;
border-right-color: $tooltip-border-color;
}
}
}
@marcnorthover
Copy link

I had to add this above line 3 to get it to work:
$tooltip-arrow-width: 5px;

otherwise works perfectly.

@dsnoeck
Copy link

dsnoeck commented Jun 9, 2017

Check my fork if you want to customise background and text color as well: https://gist.github.com/dsnoeck/9ce65ec8d025796c3be53e7c06880eab

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment