I have a problem like this (jsfiddle). Why does the hover of the absolute position is not only the bullet area? It cause I can't click the button, because of it covered by that absolute position. I want that tooltip shows only just when mouse over on the top of the bullet area not outside. Please help me, tq.
css:
.badgeP {
list-style: none;
padding:0;
padding-bottom: -10px;
margin-left: 25px;
display: inline-block;
position: relative;
}
.badgeP > li{
display: inline-block;
}
li.badgeP1:before{
content: "\25cf\00a0";
font-family: arial;
font-size: 100%;
position: relative;
left: 6px;
margin-left: -4px;
}
li.badgeP1:before {
color: orange;
}
.badgeP1:hover .ttbadgeP1{
opacity:1;
}
.badgeP1{
position: relative;
}
.ttbadgeP1{
background-color: black;
font-size: 90%;
padding-left: 3px;
padding-right: 7px;
padding-top: 0px;
padding-bottom: 2px;
margin: auto;
width: 40px;
height: auto;
position: absolute;
border-radius: 3px;
left: -18px;
top: 17px;
color: white;
box-shadow: 2px 2px 2px #888888;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.ttbadgeP1-text:before{
content: '';
width: 0px;
height: 0px;
position: absolute;
border-style: solid;
border-width: 4px;
border-color: transparent transparent black transparent;
left: 17px;
top: -8px;
}
.ttbadgeP1-text{
position: relative;
float: left;
width: auto;
text-align: center;
}
html:
<ul class='badgeP'>
<li class='badgeP1'>
<span class='ttbadgeP1'><span class='ttbadgeP1-text'>reputasi klik</span></span> 556
</li>
</ul>
<br>
. <input type='button' value='muke'></input>
you need to get that badge (.ttbadgeP1) out ouf your way first, using visibility:
.ttbadgeP1{visibility:hidden;}
then show it only on hover:
.badgeP1:hover .ttbadgeP1{visibility:visible;}
updated fiddle: http://jsfiddle.net/k2uepv26/3/
note that you can't just use the display property instead of visibility, see this question for details
Please change the width of .ttbadgeP1
.ttbadgeP1 {
width: 72px;
}
Related
I am trying to create a button with an arrow same as the below image:
But when I do that using the below code it looks like this:
My Code:
.ms-btn,
.ms-btn:hover {
border: 2px solid #3E5B73;
color: #3E5B73;
font-size: 12px;
font-family: 'Ubuntu';
border-radius: 40px;
padding: 16px 28px;
position: relative;
background: transparent;
transition: 0.3s all linear;
}
.ms-btn:before {
content: url(../img/image-left.svg);
position: absolute;
left: -15px;
top: 23%;
/*background: #fff;*/
padding: 5px;
height: 24px;
display: flex;
transform: translateX(0px);
transition: 0.3s all linear;
}
<a class="ms-btn" href="">LEARN MORE</a>
Hope to see any solution for it using css. so button borders can cut or something..
Add to you code the background-color for the 'svg' and adjust the position top. that was it.
div {
padding: 20px;
}
.ms-btn,
.ms-btn:hover {
border: 2px solid #3E5B73;
color: #3E5B73;
font-size: 12px;
font-family: 'Ubuntu';
border-radius: 40px;
padding: 16px 28px;
position: relative;
background: transparent;
transition: 0.3s all linear;
}
.ms-btn:before {
content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yMS44ODMgMTJsLTcuNTI3IDYuMjM1LjY0NC43NjUgOS03LjUyMS05LTcuNDc5LS42NDUuNzY0IDcuNTI5IDYuMjM2aC0yMS44ODR2MWgyMS44ODN6Ii8+PC9zdmc+');
position: absolute;
left: -15px;
top: 15%;
background: #fff;
padding: 5px;
height: 24px;
display: flex;
transform: translateX(0px);
transition: 0.3s all linear;
}
<div>
<a class="ms-btn" href="">LEARN MORE</a>
</div>
Use clip-path to cut the border. I have added 2 CSS variables to control the cut area:
.ms-btn {
--s: 15px;
--b: 10px;
display: inline-block;
margin: 50px;
color: #3E5B73;
font-size: 12px;
padding: 16px 28px;
position: relative;
transition: 0.3s all linear;
}
/* the border */
.ms-btn:before {
content: "";
position: absolute;
inset: 0;
border: 2px solid #3E5B73;
border-radius: 40px;
clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 calc(50% + var(--s)),var(--b) calc(50% + var(--s)),var(--b) calc(50% - var(--s)),0 calc(50% - var(--s)));
}
/* the arrow */
.ms-btn:after {
content: "";
position: absolute;
left: -10px;
top: calc(50% - 10px);
background: red;
height: 20px;
width: 20px;
}
<a class="ms-btn" href="">LEARN MORE</a>
The closest style to what you want is that I noted below. I remove left border and reduce top and bottom left border radius. You can increase or decrease them as you want. This arrow doesn't have and doesn't need background color and I think it will solve you problem and meet your need.
div {
padding: 20px;
}
.ms-btn,
.ms-btn:hover {
border-width: 2px 2px 2px 0px;
border-color: #3E5B73;
border-style: solid;
color: #3E5B73;
font-size: 12px;
font-family: 'Ubuntu';
border-radius: 20px 40px 40px 20px;
padding: 16px 28px;
position: relative;
background: transparent;
transition: 0.3s all linear;
}
.ms-btn:before {
content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yMS44ODMgMTJsLTcuNTI3IDYuMjM1LjY0NC43NjUgOS03LjUyMS05LTcuNDc5LS42NDUuNzY0IDcuNTI5IDYuMjM2aC0yMS44ODR2MWgyMS44ODN6Ii8+PC9zdmc+');
position: absolute;
left: -25px;
top: 15%;
padding: 5px;
height: 24px;
display: flex;
transform: translateX(0px);
transition: 0.3s all linear;
}
<div>
<a class="ms-btn" href="">LEARN MORE</a>
</div>
How do I achieve this kind of checkbox (Image Shown Below) ? I tried some code, but it won't work as I expected. I am not familiar with css before, after pseudo elements.
JSFiddle
.chkbox {
height: 15px;
width: 15px;
background-color: #fff;
border: 1px solid #ddd;
position: relative;
transition: border-color ease 0.125s;
-ms-transition: border-color ease 0.125s;
-moz-transition: border-color ease 0.125s;
-webkit-transition: border-color ease 0.125s;
cursor: pointer;
border-radius: 2px;
}
.chkbox:before {
right: -1px;
width: 1px;
top: -1px;
height: 8px
}
.chkbox:after {
top: -1px;
right: 0;
width: 2px;
height: 2px
}
Why not use clip-path? Remove pseudo-elements and just add something like clip-path: polygon(0 0, 65% 0%, 65% 25%, 100% 25%, 100% 100%, 0 100%);
.chkbox {
height: 15px;
width: 15px;
background-color: #fff;
border: 1px solid #ddd;
position: relative;
transition: border-color ease 0.125s;
-ms-transition: border-color ease 0.125s;
-moz-transition: border-color ease 0.125s;
-webkit-transition: border-color ease 0.125s;
cursor: pointer;
border-radius: 2px;
clip-path: polygon(0 0, 65% 0%, 65% 25%, 100% 25%, 100% 100%, 0 100%);
}
<div class="chkbox"></div>
That's very handy, by the way http://bennettfeely.com/clippy/
Here is an example.
.chkbox {
display: none;
}
.chkbox+label {
display: inline-block;
color: #666666;
position: relative;
padding-left: 30px;
margin: 7px 10px;
font-size: 16px;
line-height: 20px;
}
.chkbox+label:before {
content: "";
line-height: 20px;
display: inline-block;
width: 18px;
height: 18px;
margin-right: 10px;
position: absolute;
left: 0;
top: -1px;
border-radius: 3px;
border: 1px solid #aaaaaa;
}
.chkbox+label:after {
height: 7px;
width: 7px;
content: "";
background-color: #ffffff;
position: absolute;
left: 13px;
top: -1px;
}
<input type="checkbox" class="chkbox">
<label for="check1">Morning</label>
Try to override borders like this
.chkbox:before {
content: "";
width: 7px;
height: 7px;
background:white;
position:absolute;
right:-1px;
top:-1px;
}
here is fiddle example for you
https://jsfiddle.net/th9qpdvh/2/
You can also use image for this purpose
Try this
.chkbox {
height: 15px;
width: 15px;
background-color: #fff;
border: 1px solid #ddd;
position: relative;
transition: border-color ease 0.125s;
-ms-transition: border-color ease 0.125s;
-moz-transition: border-color ease 0.125s;
-webkit-transition: border-color ease 0.125s;
cursor: pointer;
border-radius: 2px;
box-shadow: 1px -1px 2px #ccc;
}
.chkbox:after {
content: '';
display: block;
right: -3px;
width: 9px;
top: -3px;
height: 9px;
background: #fff;
position: absolute;
}
<div class="chkbox"></div>
You cannot modify the input type="checkbox" element into the desired shape directly, because:
Input elements don't have pseudo elements.
You cannot use clip-path as mentioned in one of the answers because of very low browser support (if that is a concern for you.) CanIUse Reference
So I would suggest you to go with #Pugazh's answer
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label {
display: inline-block;
position: relative;
color: #404040;
padding-left: 30px;
margin: 7px 10px;
font-size: 16px;
line-height: 20px;
}
input[type="checkbox"] + label:before, input[type="checkbox"] + label:after {
content: "";
position: absolute;
display: block;
}
input[type="checkbox"] + label:before {
width: 18px;
height: 18px;
left: 0;
top: -1px;
border-radius: 3px;
border: 1px solid #aaaaaa;
}
input[type="checkbox"] + label:after {
height: 7px;
width: 7px;
background-color: #ffffff;
left: 13px;
top: -1px;
}
Hidden those corner borders using this below class.
Few other answers are good. But, it doesn't work on some browsers. Another answer affect my TICK css class. Finally I found this below solution to solve this issue without compatibility problems.
JsFiddle
.hideWhite{
width:10px;
height:10px;
background:#fff;
border-radius:50%;
position:absolute;
top:-2px;
right:-4px;
display:inline-block
}
I have created a html table which contains tooltips for each cell. I don't understand at this point, why most of the tooltips are drawn above the table while some of the tooltips are covered by neighbouring cells? I just played around with the z-index, but could get it working properly.
Do you you have any ideas?
Since I am not allowed to post images, here is only a link:
Comparing image of working and non working tooltip
Please don't take the css stuff too serious, I am no web developer, I just wanted a quick html table solution.
So the example can be found right here:
https://jsfiddle.net/6foqnLkm/
The related tooltip css code (found on the web)
/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
pointer-events: none;
-moz-transition: ease 0.5s all;
-o-transition: ease 0.5s all;
-webkit-transition: ease 0.5s all;
transition: ease 0.5s all;
}
/* Position tooltip above the element */
[data-tooltip]:before {
position: absolute;
bottom: 110%;
left: 50%;
margin-bottom: 5px;
margin-left: -80px;
padding: 7px;
width: 160px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
background-color: black;
color: #fff;
content: attr(data-tooltip);
text-align: center;
font-size: 14px;
line-height: 1.2;
}
/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
position: absolute;
bottom: 110%;
left: 50%;
margin-left: -5px;
width: 0;
border-top: 5px solid black;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
content: " ";
font-size: 0;
line-height: 0;
}
/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
visibility: visible;
bottom: 90%;
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
display: block;
white-space: pre-wrap;
}
Remove "z-index : 2" in [data-tooltip] and add "z-index: 9" in [data-tooltip]:before
[data-tooltip] {
position: relative;
cursor: pointer;
}
[data-tooltip]:before {
z-index:9;
position: absolute;
bottom: 110%;
left: 50%;
margin-bottom: 5px;
margin-left: -80px;
padding: 7px;
width: 160px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
background-color: black;
color: #fff;
content: attr(data-tooltip);
text-align: center;
font-size: 14px;
line-height: 1.2;
}
Try this
[data-tooltip]:before {z-index:9;}
Click here for Demo
I was messing around with some buttons online and came by a button that displays an arrow when hovered over.
I'm looking through the css and the html for this element but can't see this arrow they're displaying anywhere.
The button is an a tag with a span inside, like this:
<a href="#" id="makeGroupButton">
<span>Button</span>
</a>
When a user hovers over it some text gets appended to it somehow, but I can't figure out how that's happening.
I made a JsFiddle to show: http://jsfiddle.net/aoprjmxr/
The css is beyond my scope, can anybody help me see where this arrow is getting inserted?
using :after and :before http://jsfiddle.net/aoprjmxr/1/
#makeGroupButton:hover:before {
content: 'before';
display: inline-block;
}
#makeGroupButton:hover:after {
content: 'after';
display: inline-block;
}
like so you can also show background-image: url(path/to/image) and you can also set position and so on
#makeGroupButton span:after
{
content: '';
position: absolute;
top: 0;
right: -14px;
opacity: 0;
width: 10px;
height: 10px;
margin-top: -10px;
background: rgba(0, 0, 0, 0);
border: 3px solid #FFF;
border-top: none;
border-right: none;
transition: opacity 0.5s, top 0.5s, right 0.5s;
}
#makeGroupButton:hover span, #makeGroupButton:active span
{
padding-right: 30px;
}
#makeGroupButton:hover span:after, #makeGroupButton:active span:after
{
transition: opacity 0.5s, top 0.5s, right 0.5s;
opacity: 1;
border-color: white;
right: 0;
top: 50%;
}
This CSS is doing the magic!
Made it with #makeGroupButton span:after and add right: -14px; By default,
when you hover it, then : right: 0; and you can see the span
It's coming using :after css in #makeGroupButton span:after.
I have do some changes in your css to display arrow on hover.
#makeGroupButton
{
letter-spacing: 2px;
text-align: center;
color: white;
font-size: 24px;
font-family: sans-serif;
font-weight: 300;
position: absolute;
width: 220px;
background: green;
overflow: hidden;
transition: all 0.5s;
display:table;
}
#makeGroupButton:hover, #makeGroupButton:active
{
text-decoration: none;
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
}
#makeGroupButton span
{
display: inline-block;
position: relative;
padding-right: 0;
transition: padding-right 0.5s;
display:table-cell;
vertical-align:middle;
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
#makeGroupButton span:after
{
content: '';
position: absolute;
top: 17px;
right: -14px;
opacity: 0;
width: 10px;
height: 10px;
margin-top: -10px;
background: rgba(0, 0, 0, 0);
border: 3px solid #FFF;
border-top: none;
border-right: none;
transition: opacity 0.5s, top 0.5s, right 0.5s;
transform: rotate(-135deg);
}
#makeGroupButton:hover span, #makeGroupButton:active span
{
padding-right: 30px;
}
#makeGroupButton:hover span:after, #makeGroupButton:active span:after
{
transition: opacity 0.5s, top 0.5s, right 0.5s;
opacity: 1;
border-color: white;
right: 10px;
}
<a href="#" id="makeGroupButton">
<span>Button</span>
</a>
To remove the arrow check this class #makeGroupButton:hover span:after, #makeGroupButton:active span:after and remove the opacity or right:0 in css and also remove padding in this class css #makeGroupButton:hover span, #makeGroupButton:active span
There are plenty of JavaScript-based libraries that show tooltips when you hover your mouse over a certain area of a web page. Some are rather plain, some allow the tooltip to display HTML content styled with CSS.
But is there a way to show a styled tooltip without using JavaScript? If you just use the title attribute, tags are not processed (e.g. foo<br />bar doesn't produce a line break). I'm looking for a solution that allows one to display styled HTML content without using any JavaScript.
I have made a little example using css
.hover {
position: relative;
top: 50px;
left: 50px;
}
.tooltip {
/* hide and position tooltip */
top: -10px;
background-color: black;
color: white;
border-radius: 5px;
opacity: 0;
position: absolute;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.hover:hover .tooltip {
/* display tooltip on hover */
opacity: 1;
}
<div class="hover">hover
<div class="tooltip">asdadasd
</div>
</div>
FIDDLE
http://jsfiddle.net/8gC3D/471/
Using the title attribute:
Link
Similar to koningdavid's, but works on display:none and block, and adds additional styling.
div.tooltip {
position: relative;
/* DO NOT include below two lines, as they were added so that the text that
is hovered over is offset from top of page*/
top: 10em;
left: 10em;
/* if want hover over icon instead of text based, uncomment below */
/* background-image: url("../images/info_tooltip.svg");
/!* width and height of svg *!/
width: 16px;
height: 16px;*/
}
/* hide tooltip */
div.tooltip span {
display: none;
}
/* show and style tooltip */
div.tooltip:hover span {
/* show tooltip */
display: block;
/* position relative to container div.tooltip */
position: absolute;
bottom: 1em;
/* prettify */
padding: 0.5em;
color: #000000;
background: #ebf4fb;
border: 0.1em solid #b7ddf2;
/* round the corners */
border-radius: 0.5em;
/* prevent too wide tooltip */
max-width: 10em;
}
<div class="tooltip">
hover_over_me
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis purus dui. Sed at orci. </span>
</div>
This one is very interesting,
HTML and CSS only
.help-tip {
position: absolute;
top: 18px;
left: 18px;
text-align: center;
background-color: #BCDBEA;
border-radius: 50%;
width: 24px;
height: 24px;
font-size: 14px;
line-height: 26px;
cursor: default;
}
.help-tip:before {
content: '?';
font-weight: bold;
color: #fff;
}
.help-tip:hover span {
display: block;
transform-origin: 100% 0%;
-webkit-animation: fadeIn 0.3s ease-in-out;
animation: fadeIn 0.3s ease-in-out;
}
.help-tip span {
display: none;
text-align: left;
background-color: #1E2021;
padding: 5px;
width: 200px;
position: absolute;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
left: -4px;
color: #FFF;
font-size: 13px;
line-height: 1.4;
}
.help-tip span:before {
position: absolute;
content: '';
width: 0;
height: 0;
border: 6px solid transparent;
border-bottom-color: #1E2021;
left: 10px;
top: -12px;
}
.help-tip span:after {
width: 100%;
height: 40px;
content: '';
position: absolute;
top: -40px;
left: 0;
}
<span class="help-tip">
<span > This is the inline help tip! </span>
</span>
Pure CSS:
.app-tooltip {
position: relative;
}
.app-tooltip:before {
content: attr(data-title);
background-color: rgba(97, 97, 97, 0.9);
color: #fff;
font-size: 12px;
padding: 10px;
position: absolute;
bottom: -50px;
opacity: 0;
transition: all 0.4s ease;
font-weight: 500;
z-index: 2;
}
.app-tooltip:after {
content: '';
position: absolute;
opacity: 0;
left: 5px;
bottom: -16px;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent rgba(97, 97, 97, 0.9) transparent;
transition: all 0.4s ease;
}
.app-tooltip:hover:after,
.app-tooltip:hover:before {
opacity: 1;
}
<div href="#" class="app-tooltip" data-title="Your message here"> Test here</div>
Another similar way to do it with CSS:
#img { }
#img:hover {visibility:hidden}
#thistext {font-size:22px;color:white }
#thistext:hover {color:black;}
#hoverme {width:50px;height:50px;}
#hoverme:hover {
background-color:green;
position:absolute ;
left:300px;
top:100px;
width:40%;
height:20%;
}
<p id="hoverme"><img id="img" src="http://a.deviantart.net/avatars/l/o/lol-cat.jpg"></img><span id="thistext">LOCATZ!!!!</span></p>
Try the Js Fiddle
Here are some links about transitions and other ways to do it:
http://www.w3schools.com/css3/css3_transitions.asp
http://dev.opera.com/articles/view/css3-show-and-hide/
You can use the title attribute, e.g. if you want to have a Tooltip over a text, just make:
<span title="This is a Tooltip">This is a text</span>
This is my solution for this:
https://gist.github.com/BryanMoslo/808f7acb1dafcd049a1aebbeef8c2755
The element recibes a "tooltip-title" attribute with the tooltip text and it is displayed with CSS on hover, I prefer this solution because I don't have to include the tooltip text as a HTML element!
#HTML
<button class="tooltip" tooltip-title="Save">Hover over me</button>
#CSS
body{
padding: 50px;
}
.tooltip {
position: relative;
}
.tooltip:before {
content: attr(tooltip-title);
min-width: 54px;
background-color: #999999;
color: #fff;
font-size: 12px;
border-radius: 4px;
padding: 9px 0;
position: absolute;
top: -42px;
left: 50%;
margin-left: -27px;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:after {
content: "";
position: absolute;
top: -9px;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #999999 transparent transparent;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover:before,
.tooltip:hover:after{
visibility: visible;
opacity: 1;
}