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
Related
Hi the tooltip in this sniped closes when trying to hover on the arrows of the scroll. With the mouse scroll it works fine but i need it to work with mousehover.
Got any suggestions?
Thank you in advance
.wrapper{
position:relative;
}
.tooltip {
transform: none;
margin: 50px;
}
.tooltip:hover > .tooltip-text, .tooltip:hover > .wrapper {
pointer-events: auto;
opacity: 1.0;
}
.tooltip > .tooltip-text, .tooltip >.wrapper {
display: block;
position: absolute;
z-index: 6000;
overflow: visible;
padding: 5px 8px;
margin-top: 10px;
line-height: 16px;
border-radius: 4px;
text-align: left;
color: #fff;
background: #000;
pointer-events: none;
opacity: 0.0;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
/* Arrow */
.tooltip > .tooltip-text:before, .tooltip > .wrapper:before {
display: inline;
top: -5px;
content: "";
position: absolute;
border: solid;
border-color: rgba(0, 0, 0, 1) transparent;
border-width: 0 .5em .5em .5em;
z-index: 6000;
left: 20px;
}
/* Invisible area so you can hover over tooltip */
.tooltip > .tooltip-text:after, .tooltip > .wrapper:after {
top: -20px;
content: " ";
display: block;
height: 20px;
position: absolute;
width: 60px;
left: 20px;
}
.wrapper > .tooltip-text {
overflow-y: auto;
max-height: 100px;
display: block;
}
<div class="tooltip tooltip-scroll">Hover over me for scrollbar
<div class="wrapper">
<span class="tooltip-text">Hello there<br/>Hello there<br/>Hello there<br/>Hello there<br/>Hello there<br/>Hello there<br/>abc<br/>def<br/><br/>def<br/><br/>def<br/><br/>def<br/>ghi<br/>jkl<br/></span>
</div>
</div>
based on my try-error research, I got a solution for webkit based on applying styles to "force" the browser to handle the scrollbar as another page element:
.tooltip.tooltip-scroll ::-webkit-scrollbar {
background-color: #F1F1F1;
}
.tooltip.tooltip-scroll ::-webkit-scrollbar-thumb {
background-color: #C1C1C1;
border: 1px solid #F1F1F1;
}
/* optional */
.tooltip.tooltip-scroll ::-webkit-scrollbar-button {
background-color: #F1F1F1;
}
(More examples on how to style the scrollbar #CSS-Tricks.)
Also, here goes an extra help.
Change style .tooltip for this:
.tooltip {
transform: none;
padding: 10px;
}
The padding allows the element that triggers the tooltip to do not lose the :hover state when moving the mouse pointer from the element to the tooltip. Since the padding area is still considered part of the element.
Note for Stack Overflow community: please, feel free to provide extra information on how this works.
Just hover on 'a headline' in the snippet below and you will see how elements are moving. Why?
There's no margin .. And they're only moving when I add border to the inline-block element. Try to add more border width in section.twelve a like:
section.twelve a {
border-bottom: 10px solid #FFFAFF;
}
But if you remove the border everything's fine.. Why is this behavior ? and is it only for border?
I just want to add any styles to the element without effecting the others.
section{
position: relative;
height: 300px;
padding: 15px 80px;
z-index: 1;
}
section h1{
font-size:3em;
font-weight: 100;
line-height: 1.3;
}
section a {
position: relative;
display: inline-block;
text-decoration: none;
transition: all 0.3s ease-in-out;
vertical-align: bottom;
}
section.twelve {
background: #121A5A;
color: #FFFAFF;
}
section.twelve a {
color:#D8315B;
font-weight: 700;
overflow: hidden;
padding: 0px 5px;
transition all 0.2s ease;
border-bottom: 5px solid #FFFAFF;
}
.twelve a:before{
content: "";
top:0; left: 0;
position: absolute;
width:100%; height: 100%;
background: #FFFAFF;
z-index: -1;
transition: all 0.2s ease;
transform: translateX(100%);
}
.twelve a:hover::before {
transform: translateX(-95%);
background: #D8315B;
}
.twelve a:hover{
color: #FFFAFF;
transform: translateX(5px);
border-bottom: 1px solid #FFFAFF;
}
<section class="twelve">
<h1>Write a headline that makes people do kind of a double take whenthey read it.</h1>
</section>
When you add, or change the width, of a border, that changes the size of the element. Hence, by adding the border on hover, the box grows to occupy more space, which naturally shifts the position of surrounding text / elements.
One method to resolve this issue is to always have the border present, so the size of the box is fixed. When the border shouldn't be visible, it's transparent.
Here's an example:
section {
position: relative;
height: 300px;
padding: 15px 80px;
z-index: 1;
}
section h1 {
font-size: 3em;
font-weight: 100;
line-height: 1.3;
}
section a {
position: relative;
display: inline-block;
text-decoration: none;
transition: all 0.3s ease-in-out;
vertical-align: bottom;
}
section.twelve {
background: #121A5A;
color: #FFFAFF;
}
section.twelve a {
color: #D8315B;
font-weight: 700;
overflow: hidden;
padding: 0px 5px;
transition all 0.2s ease;
border-bottom: 5px solid transparent; /* ADJUSTMENT */
}
.twelve a:before {
content: "";
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
background: #FFFAFF;
z-index: -1;
transition: all 0.2s ease;
transform: translateX(100%);
}
.twelve a:hover::before {
transform: translateX(-95%);
background: #D8315B;
}
.twelve a:hover {
color: #FFFAFF;
transform: translateX(5px);
border-bottom: 5px solid white; /* ADJUSED */
}
<section class="twelve">
<h1>Write a headline that makes people do kind of a double take whenthey read it.</h1>
</section>
Yes, on hover you are changing element's border, so, element's total height also changes
I've been working on an element where the "borders" or under/overlines would meet on the left and right side of the element in a slow transition.
This is where I've got so far: http://codepen.io/anon/pen/RRNjgo
.sliding-middle-out:hover {
font-size: 30px;
transition: font-size 2s ease;
}
.dark {
background-color: black;
display: inline-block;
min-width: 200px;
min-height: 300px;text-align: center;
cursor: pointer;
}
.dark h1 {
color: white;
text-align: center;
}
.sliding-middle-out {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.sliding-middle-out h1:after {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width 2s ease, background-color .5s ease;
}
.sliding-middle-out:hover h1:after {
width: 50%;
background: #b7d333;
}
.sliding-middle-out h1:before {
content: '';
display: block;
margin: auto;
height: 3px;
width: 0px;
background: transparent;
transition: width 2s ease, background-color .5s ease;
}
.sliding-middle-out:hover h1:before {
width: 50%;
background: #b7d333;
border-left: 1px solid black;
}
<div class="dark sliding-middle-out">
<h1 class="">FAQs</h1>
</div>
One approach I tried was to display borders on the h1 element after the under/overline transition was finished, but couldn't get it to work.
But I cant figure out how i would get the desired effect.
got the base for this project from here.
http://bradsknutson.com/blog/css-sliding-underline/
Take another element like span inside h1 and make border right and left effect on them.
for example
Html
<div class="dark sliding-middle-out">
<h1 class=""><span>FAQs</span></h1>
</div>
css
.sliding-middle-out h1 span {
position: relative;
}
.sliding-middle-out h1 span:after,
.sliding-middle-out h1 span:before {
content: '';
display: block;
margin: auto;
width: 3px;
transition: height 2s ease, background-color .5s ease;
background: #B7D333;
top: 0;
bottom: 0;
height: 0;
position: absolute;
}
.sliding-middle-out h1 span:before {
left: -5px;
}
.sliding-middle-out h1 span:after {
right: -5px;
}
.sliding-middle-out:hover h1 span:after,
.sliding-middle-out:hover h1 span:before {
height:50%;
}
Demo
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;
}
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;
}