Is there anything I can do to remove the default tooltip?
Screenshot:
This is my HTML:
<div class="filter-button"><img src="/themes/Phyre/css/img/work.png"></div>
... and this is my CSS:
.tooltip{
display: inline;
position: relative;
}
.tooltip:hover:after{
background: #6C8095;
border-radius: 5px;
bottom: 76px;
color: #fff;
text-align: center;
text-transform: uppercase;
content: attr(title);
left: 10%;
padding: 5px 10px;
position: absolute;
z-index: 98;
}
.tooltip:hover:before{
border: solid;
border-color: #6C8095 transparent;
border-width: 6px 6px 0 6px;
bottom: 70px;
content: "";
left: 40%;
position: absolute;
z-index: 99;
}
Replace
title="Work"
with
data="Work"
and
content: attr(title);
with
content: attr(data);
Related
Creating a custom slider which should be supporting Chrome and IE11.
Facing issues positioning the thumb and elements(White circle and red oval) on the slider track.
The white circles should be connected with a line.
Here is the fiddle of what i have achieved.
https://jsfiddle.net/Pravin_it14/7t9bsrdn/7/
/*Slider*/
.areaDetail_graph_04 {
height: 87px;
width: 614px!important;
position: relative;
/* background-color: rgba(255,255,255,0.5); */
/* border-radius: 8px 8px 8px 8px; */
}
.areaDetail_graph_04 .img {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAmYAAABXCAYAAACulYmrAAAACXBIWXMAAAsSAAALEgHS3X78AAADzklEQVR4nO3dT25TVxTA4ROHCuq4LaZS1M5AQuowLCE7apbQJSQ7yhYyrIQEM6pIjaGx3UYUXB3zAlWC0H0PiI+U75tkEsfRu5Of7r+3tVqt4qrZfPkwIg4iYj8i9q79AgAAQ5xExHFEHE4n4+dXP38tzGbz5WFE/OpRAwB8VUfTyfjg/1/wPsxm8+X9ruDMkAEA3IycQdufTsYv89tGIcoAADYl2+u4a7F3YRYRv4kyAICN2OtaLLbOzhe50f+ZcQAA2KhHo+70JQAAm3Uw6q7EAABgs/ZzKfP6RWYAANy4kUcOAFCDMAMAKEKYAQAUIcwAAIoQZgAARdz5nH9jcfE6Xryax19/X8TFv2+MKQBwK929sx3ff3s3dr8br38ONei6jIywp6ezdZABAPBBhtnj3ek61vrqHWZni3/WUfbm7VtDAADwEduj0TrOHuzc6/V4eu0xyyj7/Y8/RRkAwCdkK2UzZTv10Rxml8uXAAC0yXbqsw+/OcwsXwIA9JPt1GdiqynMcpO/jf4AAP1lQ+VNFi2awuz0fGkYAAAGyuvFWjTPmAEAMExrSzWFmctjAQCGa20pr2QCAChCmAEAFCHMAACKEGYAAEU0hdmQl3ACANCvpZrCLN+SDgDAMK0t1RRmP/8wMQwAAAO1tlRTmO3c/casGQDAANlQ2VItmjf/P96dxvbIWQEAgFbZTtlQrZpLKzet9fnDAAC3XbZTn0OUvabAHuzci19++tHMGQDAJ2QrZTNlO/WxdXa+WPV9sPm+p6enMy83BwC4IveU9Z0puzQozC4tLl7Hi1fzdaB50TkAcFtlhGWQ5enL1o3+H/NZYQYAwJdjsxgAQBHCDACgCGEGAFCEMAMAKEKYAQAUIcwAAIoQZgAARQgzAIAihBkAQBHCDACgCGEGAFCEMAMAKEKYAQAUIcwAAIoQZgAARQgzAIAihBkAQBHCDACgCGEGAFCEMAMAKEKYAQAUIcwAAIoQZgAARQgzAIAihBkAQBHCDACgCGEGAFCEMAMAKEKYAQAUIcwAAIoQZgAARQgzAIAihBkAQBHCDACgCGEGAFCEMAMAKEKYAQAUIcwAAIoQZgAARQgzAIAihBkAQBEZZicGAwBg404yzI6NAwDAxh1vnZ0vHkbEM2MBALBRj0bTyfh5RBwZBwCAjTnKJttarVYxmy/vd0uae8YDAOBGnUwn4ydxeSpzOhm/jIh9BwEAAG7USddga++vy8g462rNsiYAwNeXy5dPugmytfVS5lWz+TIPBBx0BWd5EwDgy8gZstw+dtjt8/8gIv4DGWnfdriGm90AAAAASUVORK5CYII=);
height: 87px;
margin-left: -1px;
width: 614px!important;
z-index: 1;
position: absolute;
top: 0;
}
.range {
position: absolute;
top: 0;
z-index: 99;
width: 614px!important;
}
.range-labels {
margin: 55px -20px 0 5px;
padding: 0;
list-style: none;
width: 614px!important;
}
.range-labels li {
position: relative;
float: left;
width: 100px;
text-align: center;
color: #808093;
font-size: 11px;
font-weight: 600;
cursor: pointer;
}
.range-labels li::before {
position: absolute;
top: -35px;
right: 0;
left: 0px;
content: "";
margin: 0 auto;
width: 10px;
height: 10px;
background: #E9EEF0;
border-radius: 50%;
}
.range-labels li:nth-child(1):before {
position: absolute;
top: -42px;
right: 0;
left: -20px;
content: "";
margin: 0 auto;
width: 35px;
height: 23px;
background: #F06C81;
border-radius: 40%;
}
.range-labels li:nth-child(2):before {
position: absolute;
top: -42px;
right: 0;
left: -20px;
content: "";
margin: 0 auto;
width: 35px;
height: 23px;
background: #F06C81;
border-radius: 40%;
}
.range-labels li:nth-child(3):before {
position: absolute;
top: -42px;
right: 0;
left: -20px;
content: "";
margin: 0 auto;
width: 35px;
height: 23px;
background: #F06C81;
border-radius: 40%;
}
.range-labels li:nth-child(4):before {
position: absolute;
top: -42px;
right: 0;
left: -20px;
content: "";
margin: 0 auto;
width: 35px;
height: 23px;
background: #F06C81;
border-radius: 40%;
}
.range-labels li:nth-child(5):before {
position: absolute;
top: -42px;
right: 0;
left: -35px;
content: "";
margin: 0 auto;
width: 35px;
height: 23px;
background: #F06C81;
border-radius: 40%;
}
.range-labels li:nth-child(6):before {
position: absolute;
top: -42px;
right: 0;
left: -50px;
content: "";
margin: 0 auto;
width: 35px;
height: 23px;
background: #826AA7;
border-radius: 40%;
}
.range-labels li::after {
position: absolute;
top: -35px;
right: 0;
left: 0px;
content: "";
margin: 0 auto;
width: 9px;
height: 9px;
background: #E9EEF0;
border-radius: 50%;
}
input[type=range] {
-webkit-appearance: none;
margin: 0px 0 0 30px;
width: 88%;
z-index: 9999;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
height: 2px;
background: #E9EEF0;
width: 100%;
cursor: pointer;
animate: 0.2s;
}
input[type=range]::-webkit-slider-thumb {
position: relative;
height: 29px;
width: 29px;
background: transparent;
cursor: pointer;
z-index: 9999;
-webkit-appearance: none;
margin-top: -14px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAdCAYAAABWk2cPAAAACXBIWXMAAAsSAAALEgHS3X78AAACeklEQVRIicWXMWgTYRiGv+T+y9WgtlocSrAekmBDS61ZrEtHoZSCg0MHIVNBJDg5hg6S0amEUugU6ODQoYuLY5fWpUZR0pJQLi2hiFitldjL3Rl5691xJrnepfnTvpAld3mfu+///+97E6jX6+RXyUx2jIjwkR0/UYgon0un8n59PKEAhXukl6qmPZREMXDjWl/oeu8V+/rB4RF9/f6jpmpaXRLFt9Vjdc7rAVyhyUxWDvdIyzVNv39HvslityLU33vV1ehX9Td9Kim0rezpIZG9qx6rT3LplOIbmsxkHwlC8PWQPCgl4lEKieKp1XCqpmm0WSjRlrKrGsafmVw6teoJffpq6Zmu6/MP7g4LscGIb1ijirsVWv/w2WCMPV98MbvgCsUbikxYmZoYF04rpV99O/xJb9Y2DE03HjvfOOgAyigp3pAHEIIP/OAL/yYoNg3WsJOSthL8bkcGJPj/B8WxwC7FpumGxkfjBH/znP+D4hziWLSzS9sRfOEPjg3FwR+JyrwYLYVzDg6uMbPjBC6HL7W8ebNQpPdbJd/m94ailIjHmr7HpkJHA4+hl6K1uZnAoJXJWQROef/LGMorO3tpN2Vy5OC50BrEvG7gtaZOAapgPLmJ55qaHAXlzWMecnH1kMnJBzFwMYDRnLsp+IMD3smaYuIXy5Xp/tHmRs9rTYvlygmHrI2EiLGt7E0m4tGmVshjTTHYkSh0w5gjqw3ilRExMPG7oY2PBYK/lZ3sc4pMg4iBic9T8Nup7Kvwt2xtKEIUMg0iBq9NBR/4mVnJDmkXn5EsdZoGsYYoqe806AC3lXtRShyLM+feBvj5JXy3B+j4vwwR/QWs5oN+Ncbm9gAAAABJRU5ErkJggg==);
}
input[type=range]::-ms-track {
position: absolute;
width: 100%;
height: 2px;
cursor: pointer;
animate: 0.2s;
margin-top: -10px;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #E9EEF0;
border: 0.2px solid#E9EEF0;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #E9EEF0, 0px 0px 1px #E9EEF0;
}
input[type=range]::-ms-fill-upper {
background: #E9EEF0;
border: 0.2px solid #E9EEF0;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #E9EEF0, 0px 0px 1px #E9EEF0;
}
input[type=range]::-ms-thumb {
position: absolute;
z-index: 99999;
border: transparent;
height: 29px;
width: 29px;
background: transparent;
cursor: pointer;
background-image: url("../parts/icons/handle.png");
}
input[type=range]:focus::-ms-fill-lower {
background: #E9EEF0;
}
input[type=range]:focus::-ms-fill-upper {
background: #E9EEF0;
}
<div class="areaDetail_graph_04">
<div class="img">
<div class="range">
<input type="range" class="slider" width="614px" value="0" min="0" max="5" id="rangeSlider">
</div>
<ul class="range-labels">
<li>11:00</li>
<li>12:00</li>
<li>13:00</li>
<li>14:00</li>
<li>15:00</li>
<li>16:00</li>
</ul>
<span id="valBox"></span>
</div>
</div>
Do you mean the white circle is behind the white line?
You could try adding "margin-bottom: -15px;" to
"input[type=range]::-webkit-slider-runnable-track";
In addition, you'd better change the position of the circles inside li(5) and li (6).
use "left: -20px;"both in "li:nth-child(5)" and "li:nth-child(6)".
The complete code is as follows:
/*Slider*/
.areaDetail_graph_04 {
height: 87px;
width: 614px!important;
position: relative;
/* background-color: rgba(255,255,255,0.5); */
/* border-radius: 8px 8px 8px 8px; */
}
.areaDetail_graph_04 .img {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAmYAAABXCAYAAACulYmrAAAACXBIWXMAAAsSAAALEgHS3X78AAADzklEQVR4nO3dT25TVxTA4ROHCuq4LaZS1M5AQuowLCE7apbQJSQ7yhYyrIQEM6pIjaGx3UYUXB3zAlWC0H0PiI+U75tkEsfRu5Of7r+3tVqt4qrZfPkwIg4iYj8i9q79AgAAQ5xExHFEHE4n4+dXP38tzGbz5WFE/OpRAwB8VUfTyfjg/1/wPsxm8+X9ruDMkAEA3IycQdufTsYv89tGIcoAADYl2+u4a7F3YRYRv4kyAICN2OtaLLbOzhe50f+ZcQAA2KhHo+70JQAAm3Uw6q7EAABgs/ZzKfP6RWYAANy4kUcOAFCDMAMAKEKYAQAUIcwAAIoQZgAARdz5nH9jcfE6Xryax19/X8TFv2+MKQBwK929sx3ff3s3dr8br38ONei6jIywp6ezdZABAPBBhtnj3ek61vrqHWZni3/WUfbm7VtDAADwEduj0TrOHuzc6/V4eu0xyyj7/Y8/RRkAwCdkK2UzZTv10Rxml8uXAAC0yXbqsw+/OcwsXwIA9JPt1GdiqynMcpO/jf4AAP1lQ+VNFi2awuz0fGkYAAAGyuvFWjTPmAEAMExrSzWFmctjAQCGa20pr2QCAChCmAEAFCHMAACKEGYAAEU0hdmQl3ACANCvpZrCLN+SDgDAMK0t1RRmP/8wMQwAAAO1tlRTmO3c/casGQDAANlQ2VItmjf/P96dxvbIWQEAgFbZTtlQrZpLKzet9fnDAAC3XbZTn0OUvabAHuzci19++tHMGQDAJ2QrZTNlO/WxdXa+WPV9sPm+p6enMy83BwC4IveU9Z0puzQozC4tLl7Hi1fzdaB50TkAcFtlhGWQ5enL1o3+H/NZYQYAwJdjsxgAQBHCDACgCGEGAFCEMAMAKEKYAQAUIcwAAIoQZgAARQgzAIAihBkAQBHCDACgCGEGAFCEMAMAKEKYAQAUIcwAAIoQZgAARQgzAIAihBkAQBHCDACgCGEGAFCEMAMAKEKYAQAUIcwAAIoQZgAARQgzAIAihBkAQBHCDACgCGEGAFCEMAMAKEKYAQAUIcwAAIoQZgAARQgzAIAihBkAQBHCDACgCGEGAFCEMAMAKEKYAQAUIcwAAIoQZgAARQgzAIAihBkAQBEZZicGAwBg404yzI6NAwDAxh1vnZ0vHkbEM2MBALBRj0bTyfh5RBwZBwCAjTnKJttarVYxmy/vd0uae8YDAOBGnUwn4ydxeSpzOhm/jIh9BwEAAG7USddga++vy8g462rNsiYAwNeXy5dPugmytfVS5lWz+TIPBBx0BWd5EwDgy8gZstw+dtjt8/8gIv4DGWnfdriGm90AAAAASUVORK5CYII=);
height: 87px;
margin-left: -1px;
width: 614px!important;
z-index: 1;
position: absolute;
top: 0;
}
.range {
position: absolute;
top: 0;
z-index: 99;
width: 614px!important;
}
.range-labels {
margin: 55px -20px 0 5px;
padding: 0px;
list-style: none;
width: 614px!important;
}
.range-labels li {
position: relative;
float: left;
width: 100px;
text-align: center;
color: #808093;
font-size: 11px;
font-weight: 600;
cursor: pointer;
}
.range-labels li::before {
position: absolute;
top: -35px;
right: 0;
left: 0px;
content: "";
margin: 0 auto;
width: 10px;
height: 10px;
background: #E9EEF0;
border-radius: 50%;
}
.range-labels li:nth-child(1):before {
position: absolute;
top: -42px;
right: 0;
left: -10px;
content: "";
margin: 0 auto;
width: 35px;
height: 23px;
background: #F06C81;
border-radius: 40%;
}
.range-labels li:nth-child(2):before {
position: absolute;
top: -42px;
right: 0;
left: -10px;
content: "";
margin: 0 auto;
width: 35px;
height: 23px;
background: #F06C81;
border-radius: 40%;
}
.range-labels li:nth-child(3):before {
position: absolute;
top: -42px;
right: 0;
left: -4px;
content: "";
margin: 0 auto;
width: 35px;
height: 23px;
background: #F06C81;
border-radius: 40%;
}
.range-labels li:nth-child(4):before {
position: absolute;
top: -42px;
right: 0;
left: 0px;
content: "";
margin: 0 auto;
width: 35px;
height: 23px;
background: #F06C81;
border-radius: 40%;
}
.range-labels li:nth-child(5):before {
position: absolute;
top: -42px;
right: 0;
/*left: -35px;*/
left: 6px;
content: "";
margin: 0 auto;
width: 35px;
height: 23px;
background: #F06C81;
border-radius: 40%;
}
.range-labels li:nth-child(6):before {
position: absolute;
top: -42px;
right: 0;
/*left: -50px;*/
left: 8px;
content: "";
margin: 0 auto;
width: 35px;
height: 23px;
background: #826AA7;
border-radius: 40%;
}
/*White circle01*/
.range-labels li:nth-child(1):after {
left: -6px;
}
/*White circle02*/
.range-labels li:nth-child(2):after {
left: -10px;
}
/*White circle03*/
.range-labels li:nth-child(3):after {
left: -1px;
}
/*White circle04*/
.range-labels li:nth-child(4):after {
left: 0px;
}
/*White circle05*/
.range-labels li:nth-child(5):after {
left: 7px;
}
/*White circle06*/
.range-labels li:nth-child(6):after {
left: 10px;
}
/*White circle*/
.range-labels li::after {
position: absolute;
top: -35px;
right: 0px;
/*left: 0px;*/
content: "";
margin: 0px auto;
width: 9px;
height: 9px;
background: #E9EEF0;
border-radius: 50%;
}
input[type=range] {
-webkit-appearance: none;
margin: -10px 0px 0px 35px;
width: 88%;
z-index: 9999;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
height: 2px;
background: #E9EEF0;
width:100%;
margin-bottom: -15px; /*add*/
/*margin-right: -5px;*/
cursor: pointer;
animate: 0.2s;
}
input[type=range]::-webkit-slider-thumb {
position: relative;
height: 29px;
width: 29px;
background: transparent;
cursor: pointer;
z-index: 9999;
-webkit-appearance: none;
margin-top: -14px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAdCAYAAABWk2cPAAAACXBIWXMAAAsSAAALEgHS3X78AAACeklEQVRIicWXMWgTYRiGv+T+y9WgtlocSrAekmBDS61ZrEtHoZSCg0MHIVNBJDg5hg6S0amEUugU6ODQoYuLY5fWpUZR0pJQLi2hiFitldjL3Rl5691xJrnepfnTvpAld3mfu+///+97E6jX6+RXyUx2jIjwkR0/UYgon0un8n59PKEAhXukl6qmPZREMXDjWl/oeu8V+/rB4RF9/f6jpmpaXRLFt9Vjdc7rAVyhyUxWDvdIyzVNv39HvslityLU33vV1ehX9Td9Kim0rezpIZG9qx6rT3LplOIbmsxkHwlC8PWQPCgl4lEKieKp1XCqpmm0WSjRlrKrGsafmVw6teoJffpq6Zmu6/MP7g4LscGIb1ijirsVWv/w2WCMPV98MbvgCsUbikxYmZoYF04rpV99O/xJb9Y2DE03HjvfOOgAyigp3pAHEIIP/OAL/yYoNg3WsJOSthL8bkcGJPj/B8WxwC7FpumGxkfjBH/znP+D4hziWLSzS9sRfOEPjg3FwR+JyrwYLYVzDg6uMbPjBC6HL7W8ebNQpPdbJd/m94ailIjHmr7HpkJHA4+hl6K1uZnAoJXJWQROef/LGMorO3tpN2Vy5OC50BrEvG7gtaZOAapgPLmJ55qaHAXlzWMecnH1kMnJBzFwMYDRnLsp+IMD3smaYuIXy5Xp/tHmRs9rTYvlygmHrI2EiLGt7E0m4tGmVshjTTHYkSh0w5gjqw3ilRExMPG7oY2PBYK/lZ3sc4pMg4iBic9T8Nup7Kvwt2xtKEIUMg0iBq9NBR/4mVnJDmkXn5EsdZoGsYYoqe806AC3lXtRShyLM+feBvj5JXy3B+j4vwwR/QWs5oN+Ncbm9gAAAABJRU5ErkJggg==);
}
input[type=range]::-ms-track {
position: absolute;
width: 100%;
height: 2px;
cursor: pointer;
animate: 0.2s;
margin-top: -10px;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #E9EEF0;
border: 0.2px solid#E9EEF0;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #E9EEF0, 0px 0px 1px #E9EEF0;
}
input[type=range]::-ms-fill-upper {
background: #E9EEF0;
border: 0.2px solid #E9EEF0;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #E9EEF0, 0px 0px 1px #E9EEF0;
}
input[type=range]::-ms-thumb {
position: absolute;
z-index: 99999;
border: transparent;
height: 29px;
width: 29px;
background: transparent;
cursor: pointer;
background-image: url("../parts/icons/handle.png");
}
input[type=range]:focus::-ms-fill-lower {
background: #E9EEF0;
}
input[type=range]:focus::-ms-fill-upper {
background: #E9EEF0;
}
<div class="areaDetail_graph_04">
<div class="img">
<div class="range">
<input type="range" class="slider" width="614px" value="0" min="0" max="5" id="rangeSlider">
</div>
<ul class="range-labels">
<li>11:00</li>
<li>12:00</li>
<li>13:00</li>
<li>14:00</li>
<li>15:00</li>
<li>16:00</li>
</ul>
<span id="valBox"></span>
</div>
</div>
I need to make this exact div with right arrow. As you can see it's little bit curved
Here's what I got. I want to make it a little bit longer and curved as in picture above
.speech-bubble {
display:inline-block;
padding:5px;
position: relative;
background: #dcf8c6;
border-radius: .4em;
}
.speech-bubble:after {
content: '';
position: absolute;
right: 0;
top: 50%;
width: 0;
height: 0;
border: 5px solid transparent;
border-left-color: #dcf8c6;
border-right: 0;
margin-top: -5px;
margin-right: -5px;
}
<div class="speech-bubble"> Hello Mike! Could you please call me back </div>
.speech-bubble {
display: inline-block;
position: relative;
}
.speech-bubble > span {
background: #dcf8c6;
border-radius: 0.4em;
display: inline-block;
padding: 10px;
z-index: 1;
}
.speech-bubble::after {
background-color: #ffffff;
border-radius: 0 0 50% 0;
border-right: 0;
bottom: 14px;
content: '';
height: 30px;
margin-top: -5px;
margin-right: -5px;
position: absolute;
right: -21px;
transform: rotate(10deg);
width: 30px;
z-index: -1;
}
.speech-bubble::before {
background-color: #dcf8c6;
border-radius: 50%;
border-right: 0;
bottom: 7px;
content: '';
height: 30px;
margin-top: -5px;
margin-right: -5px;
position: absolute;
right: -11px;
transform: rotate(20deg);
width: 30px;
z-index: -1;
}
<div class="speech-bubble">
<span>Hello Mike! Could you please call me back</span>
</div>
Here's the bubble's code
.speech-bubble {
display: inline-block;
padding: .5em 2em 2em 2em;
position: relative;
background: #dcf8c6;
border-radius: .4em;
font-family: 'Arial', sans-serif;
color: #888;
box-shadow: 2px 2px 1px rgba(0,0,0,0.2);
}
About the right arrow, what about using a background-image (png). If you want that shape you need to use border-radius. Using a .png image is way easier.
By the way, I wouldn't use a unique div to be a container and a text-wrapper...
i have this css tootlip code:
a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
width:140px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.tooltips span:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-top: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.8;
bottom: 30px;
left: 50%;
margin-left: -76px;
z-index: 999;
}
I want it to auto resize based on the text lenght. (long or short)..how i can do it? Thank you.
Get rid of; width:140px; from the class a.tooltips span
I have the following CSS that creates a blue speech bubble (JS fiddle: http://jsfiddle.net/C5N2c/:
<div class="bubble">Content</div>
.bubble
{
cursor: pointer;
position: absolute;
left:30px;
width: 200px;
height: 50px;
padding: 0px;
background: blue;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: blue solid 6px;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 10px 10px;
border-color: blue transparent;
display: block;
width: 0;
z-index: 1;
top: -10px;
left: 26px;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: blue transparent;
display: block;
width: 0;
z-index: 0;
top: -21px;
left: 21px;
}
I want to add a 1px red border around the edge of this bubble, including the small speech arrow. How can I do this? It needs to be IE8 compliant.
Take a look a this Fiddle, though I havent been able to test in IE8..
The CSS:
.bubble
{
cursor: pointer;
position: absolute;
left:30px;
width: 200px;
height: 50px;
padding: 0px;
background: blue;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: red solid 1px;
z-index:2;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 9px 9px;
border-color: blue transparent;
display: block;
width: 0;
z-index: 1;
top: -9px;
left: 26px;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 11px 12px;
border-color: red transparent;
display: block;
width: 0;
z-index: 0;
top: -12px;
left: 24px;
}
See working version on jsFidde
I did it sometime ago, you can just change the colours, It's not tested on IE, I am currently on OSX and it's a mess trying to view it on IE xD
html:
<div class="dialog">
<div class="triangleOutline">
<div class="triangle"></div>
</div>
<div class="dialogBox">
Hello!<br>
I'm a full CSS fancy dialog box :D
</div>
</div>
css:
body{
font-size: 100%;
font-family: "Arimo";
background: #eee;
}
.triangle,
.triangleOutline{
position:relative;
width: 0;
height: 0;
border: solid transparent;
border-width: 7px;
border-bottom-color: #aaf;
}
.triangleOutline{left: 15px;}
.triangle{
top: -6px; /* outline's width - 1 */
left: -7px; /* outline's width */
border-bottom-color: white;
}
.dialogBox{
background: white;
border: 1px solid #aaf;
padding: 0.75em;
border-radius: 3px;
min-height: 1.5em;
line-height: 1.5em;
}
Just change the colors as you like, I guess you are not using THOSE colors right? XD
Try this code:
.bubble
{
cursor: pointer;
position: absolute;
left:30px;
width: 200px;
height: 50px;
padding: 0px;
background: blue;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: blue solid 6px;
box-shadow: 0 0 0 1px red;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: blue transparent;
display: block;
width: 0;
z-index: 0;
top: -19px;
left: 21px;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: red transparent;
display: block;
width: 0;
z-index: 0;
top: -21px;
left: 21px;
}
See this jsfiddle.
I'm making a tooltip using CSS. Now using the following html code
<div title="This is some information for our tooltip." class="progress3">
</div>
and the following CSS
.progress3{
display: inline;
position: relative;
}
.progress3:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
content: attr(title);
}
.progress3:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
Now it works, when I hover over it shows the tooltip, but it also shows the title...
How do I remove what's circled in orange in the image below.
Simply don't add the content via the title attribute, change it to something like data-tooltip.
.progress3:hover:after {
content: attr(data-tooltip);
}
jsFiddle example
You could use JS/jQuery, but given the approach you are taking, it is impossible to hide/remove it while keeping functionality as you would then have nothing to add via CSS..
HTML
<div data-tooltip="This is some information for our tooltip." class="progress3">
</div>
CSS
.progress3 {
position: relative;
width: 100px;
height: 100px;
background: red;
}
.progress3:hover:after {
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(data-tooltip);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}
.progress3:hover:before {
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}