This question already has answers here:
Change Bootstrap tooltip color
(40 answers)
Closed 6 years ago.
I'm trying to style tootltips using
.tooltip-inner{}
But i'm having troubles cause i can't find how to style tooltip small arrow.
As shown on screenshot the arrow of the tooltip is black i want to add new color on that:
any suggestion?
You can use this to change tooltip-arrow color
.tooltip.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-bottom-color: #000000; /* black */
border-width: 0 5px 5px;
}
Use this style sheet to get you started !
.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
}
I have created fiddle for you.
Take a look at here
<p>
<a class="tooltip" href="#">Tooltip
<span>
<img alt="CSS Tooltip callout"
src="http://www.menucool.com/tooltip/src/callout.gif" class="callout">
<strong>Most Light-weight Tooltip</strong><br>
This is the easy-to-use Tooltip driven purely by CSS.
</span>
</a>
</p>
a.tooltip {
outline: none;
}
a.tooltip strong {
line-height: 30px;
}
a.tooltip:hover {
text-decoration: none;
}
a.tooltip span {
z-index: 10;
display: none;
padding: 14px 20px;
margin-top: -30px;
margin-left: 28px;
width: 240px;
line-height: 16px;
}
a.tooltip:hover span {
display: inline;
position: absolute;
color: #111;
border: 1px solid #DCA;
background: #fffAF0;
}
.callout {
z-index: 20;
position: absolute;
top: 30px;
border: 0;
left: -12px;
}
/*CSS3 extras*/
a.tooltip span {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 5px 5px 8px #CCC;
-webkit-box-shadow: 5px 5px 8px #CCC;
box-shadow: 5px 5px 8px #CCC;
}
The arrow is a border.
You need to change for each arrow the color depending on the 'data-placement' of the tooltip.
.tooltip.top .tooltip-arrow {
border-top-color: #color;
}
.tooltip.top-left .tooltip-arrow {
border-top-color: #color;
}
.tooltip.top-right .tooltip-arrow {
border-top-color:#color;
}
.tooltip.right .tooltip-arrow {
border-right-color: #color;
}
.tooltip.left .tooltip-arrow {
border-left-color: #color;
}
.tooltip.bottom .tooltip-arrow {
border-bottom-color: #color;
}
.tooltip.bottom-left .tooltip-arrow {
border-bottom-color: #color;
}
.tooltip.bottom-right .tooltip-arrow {
border-bottom-color: #color;
}
.tooltip > .tooltip-inner {
background-color: #color;
}
For styling each directional arrows(left, right,top and bottom), we have to select each arrow using CSS attribute selector and then style them individually.
Trick: Top arrow must have border color only on top side and transparent on other 3 sides. Other directional arrows also need to be styled this way.
click here for Working Jsfiddle Link
Here is the simple CSS,
.tooltip-inner { background-color:#8447cf;}
[data-placement="top"] + .tooltip > .tooltip-arrow { border-top-color: #8447cf;}
[data-placement="right"] + .tooltip > .tooltip-arrow { border-right-color: #8447cf;}
[data-placement="bottom"] + .tooltip > .tooltip-arrow {border-bottom-color: #8447cf;}
[data-placement="left"] + .tooltip > .tooltip-arrow {border-left-color: #8447cf; }
You can always try putting this code in your main css without modifying the bootstrap file what is most recommended so you keep consistency if in a future you update the bootstrap file.
.tooltip-inner {
background-color: #FF0000;
}
.tooltip.right .tooltip-arrow {
border-right: 5px solid #FF0000;
}
Notice that this example is for a right tooltip. The tooltip-inner property changes the tooltip BG color, the other one changes the arrow color.
This one worked for me!
.tooltip .tooltip-arrow {
border-top: 5px solid red !important;}
If you want to style only the colors of the tooltips do as follow:
.tooltip-inner { background-color: #000; color: #fff; }
.tooltip.top .tooltip-arrow { border-top-color: #000; }
.tooltip.right .tooltip-arrow { border-right-color: #000; }
.tooltip.bottom .tooltip-arrow { border-bottom-color: #000; }
.tooltip.left .tooltip-arrow { border-left-color: #000; }
In case you are going around and around to figure this out and none of the options above are working, it is possible you are experiencing a name space conflict of .tooltip with bootstrap and jquery.
See this answer on how to fix: jQueryUI Tooltips are competing with Twitter Bootstrap
You can add 'display: none;' to .tooltip-arrow class
.tooltip-arrow {
display: none;
}
Related
This question already has answers here:
Customizing twitter bootstrap popover arrow
(4 answers)
Closed 4 years ago.
I want it to be gray, just like the color I set here:
.tooltip > .tooltip-inner {
background-color: #b9b9b9;
color: #333;
}
but the color of the "arrow" portion of the tooltip reverts doesn't change.
I tried:
.tooltip.bottom .tooltip-arrow {
border-bottom-color: #b9b9b9;
}
and
.tooltip-arrow {
background-color: #b9b9b9;
}
to no avail. What am I missing?
Adding the CSS to class .tooltip.top .tooltip-arrow will resolve the issue, as shown in the below-working snippet.
#import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";
.example-tooltip .tooltip {
position: relative;
display: inline-block;
margin: 10px 20px;
opacity: 1;
}
.tooltip-inner {
max-width: 200px;
padding: 3px 8px;
color: #fff;
text-align: center;
background-color: gray;
border-radius: 4px;
}
.tooltip.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-width: 5px 5px 0;
border-top-color: gray;
}
<div class="example-tooltip">
<div class="tooltip top" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner"> Tooltip on the top </div>
</div>
</div>
The arrow of the tooltip comes to css as :after and is generally border value.
You have to use
.tooltip > .tooltip-inner::after {
border-color: #b9b9b9 transparent transparent transparent;
}
Im creating a css only tooltip for my new website project.
This tooltip shows right on touchdevises. The only problem is that touchdevises can't close the tooltip.
How can I modify the code that touchscreen users can close the tooltip if they touch somewhere around the tooltip? Or maybe if they touch on the tooltip visible text link?
I just want to use css if possible.
The CSS that I have:
a.tooltip {outline:none;}
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none; cursor: help;}
a.tooltip span {
z-index:10;display:none; padding:14px 20px;
margin-top:-30px; margin-left:28px;
width:220px; line-height:17px;
}
a.tooltip:hover span{
display:inline; position:absolute; color:#373535;
border:2px solid #D3D3D3; background:#fffFff;}
/*CSS3 extras*/
a.tooltip span
{
border-radius:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 1px 1px 8px #CCC;
-webkit-box-shadow: 1px 1px 8px #CCC;
box-shadow: 1px 1px 8px #CCC;
}
This is the html:
Normal Text<span><strong>Tooltip title</strong><br />This would be the content of the tooltip.</span>
Thanks for help me out guys!
Regards, Dylan
I got no problems as u describet but i tryed this and it works even better on my device. So check it that helps you.
Fiddle
HTML:
<a href="#" class="tooltip">
Normal Text
</a>
<span>
<strong>Tooltip title</strong><br />
This would be the content of the tooltip.
</span>
CSS:
a.tooltip {
outline:none;
}
a.tooltip strong {
line-height:30px;
}
a.tooltip:hover {
text-decoration:none;
cursor: help;
}
span {
z-index:10;display:none;
padding:14px 20px;
margin-top:-30px;
margin-left:28px;
width:220px;
line-height:17px;
}
a.tooltip:hover + span{
display:inline; position:absolute; color:#373535;
border:2px solid #D3D3D3; background:#fffFff;}
/*CSS3 extras*/
span {
border-radius:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 1px 1px 8px #CCC;
-webkit-box-shadow: 1px 1px 8px #CCC;
box-shadow: 1px 1px 8px #CCC;
}
I'm trying to create a triangle clickable button like div, in the attached image is what I want to actually achieve. image
This is what I've reached so far,JsFiddle
HTML:
<div class="input"><</div>
CSS:
body {padding:40px;}
.input {
text-decoration:none;
padding:5px 10px;
background:#117ebb;
font-size:9px;
color:#fff;
border-radius:5.5px 0px 0px 5px;
box-shadow: 0px 5px 3px #003355;
position:relative;
width:1px;
height:12px;
}
.input:after {
position:absolute;
top:0px;
left:-10px;
content:" ";
width: 0;
height: 0px;
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
border-right:13px solid #117ebb;
border-radius:0px 0px 0px 20px;
}
css pure triangle and with jquery you could add click events:
html
<div class="input"></div>
jquery
$(document).ready(function(){
$(".input").click(function(){
alert('hello arrow');
});
});
css
body {padding:40px;}
.input{
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
cursor: pointer;
}
http://jsfiddle.net/TvJ6t/
I would like to create a tab or label like look using only CSS and no images if possible. Here is what I mean:
I can create one end but I have not been able to create the triangle point. Is it possible to do this with only CSS?
There are indeed ways to create CSS triangles, here's a part from css-tricks.com:
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
http://css-tricks.com/snippets/css/css-triangle/
Yes, but not while supporting IE7:
<a class="tab">Your label text</a>
.tab {
background: black;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
position: relative;
}
.tab::before {
content: " ";
position: absolute;
right: 100%;
top: 0;
width: 0;
height: 0;
border-width: 35px; /* play with this value to match the height of the tab */
border-style: solid;
border-color: transparent black transparent transparent;
}
This should be a good beginning
http://css-tricks.com/snippets/css/css-triangle/
HTML
<div class="arrow-left"></div>
<div class="arrow-body"></div>
CSS
.arrow-left { float:left; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right:20px solid blue; }
.arrow-body{ float:left; width:200px; height:40px; background-color:Blue;}
Here is another one
<div></div>
div{
width:500px;
height:100px;
background-color:black;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
margin-left:100px;
}
div:before{
width:0;
height:0;
content:"";
display:inline-block;
border-top:50px solid transparent;
border-right:100px solid black;
border-bottom:50px solid transparent;
position:absolute;
left:0;
}
http://jsfiddle.net/e8feE/
This css is causing the text to shift upwards in Firefox when rolled over but not in other browsers
#element{
height:40px;
}
#element a,img{
vertical-align:middle;
}
#element a{
font-size:16px;
color:#d1d1d1;
text-decoration:none;
}
#element:hover a{
border-bottom: #fff 1px dotted;
}
Makes sense to me. You are adding a border of 1px width. This will change the dimensions of the element. A simple solution is to have a permanent border and just change its color:
#element a {
font-size: 16px;
color: #d1d1d1;
text-decoration: none;
border-bottom-style: dotted;
border-bottom-width: 1px;
border-bottom-color: transparent;
}
#element:hover a {
border-bottom-color: #fff;
}
Add display: inline-block; and margin-bottom: -1px; to compensate for the extra pixel on the bottom on hover.
#element:hover a{
border-bottom: #fff 1px dotted;
margin-bottom: -1px;
display: inline-block;
}