Develop Reference

Make hovered tooltip disappear when clicking button

I am trying to create a tooltip for whatever that needs it on my website, e.g. a button, text, etc. So far I have something like this:
https://jsfiddle.net/f06q3cLg/
.content {
display: grid;
width: 100vw;
height: 100vh;
place-content: center;
}
.content .parent {
border: 1px red solid;
padding: 10px;
position: relative;
}
.content .parent:hover .tooltip-wrapper {
animation: 0.1s fadeInTooltip;
animation-fill-mode: forwards;
animation-delay: 0.4s;
}
.content .parent:hover:before {
animation: 0.1s fadeInTooltip;
animation-fill-mode: forwards;
animation-delay: 0.4s;
}
.content .parent:active .tooltip-wrapper {
animation: 0.05s fadeOutTooltip;
animation-fill-mode: forwards;
}
.content .parent:active:before {
animation: 0.05s fadeOutTooltip;
animation-fill-mode: forwards;
}
.content .parent:before {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
left: 50%;
transform: translateX(-50%);
opacity: 0;
}
.content .parent .tooltip-wrapper {
position: absolute;
display: grid;
left: 0;
width: 300px;
height: 100%;
opacity: 0;
pointer-events: none;
}
.content .parent .tooltip-wrapper.bottom {
top: calc(100% + 8px);
}
.content .parent .tooltip-wrapper .tooltip {
max-width: 300px;
width: fit-content;
padding: 8px;
position: absolute;
display: inline-block;
background: blue;
border-radius: 5px;
padding: 8px;
color: white;
font-size: 11px;
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
line-height: 1.3;
text-align: left;
}
/* Keyframes */
#keyframes fadeInTooltip {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeOutTooltip {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
<div class="content">
<div class="parent">
Hover me
<div class="tooltip-wrapper">
<span class="tooltip">This is my tooltip</span>
</div>
</div>
</div>
As such, it works somewhat fine. My issue is that I would like the tooltip to disappear when I click the button. Now it vanishes, and then comes back with a 0.4s delay as the hover effect actually has. Ideally the tooltip should disappear as long as my mouse is still on the button, but when I remove it and re-enters the button, then the tooltip should re-appear.
I'm not sure if this is even achievable with pure CSS, but any JS would also do.

The problem is that :active is only applied as long as the mouse is down.
mdn: :active:
The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button.
What you could do (if you want to stay CSS only) is to use tabindex="0" on the <div class="parent"> and :focus instead of :active. But you need to verify that using tabindex="0" here won't hurt usability.
Ideally the tooltip should disappear as long as my mouse is still on the button, but when I remove it and re-enters the button, then the tooltip should re-appear.
That won't work with :focus either. I'm pretty sure that this behavior can only be achieved with JS. If it is possible with CSS only it likely would be a pretty hacky solution.
But from the perspective of a user, this seems to be counterintuitive that the tooltip won't appear after clicked.
A JavaScript solution that does what you want could look like this.
It is a simplified version of the tooltip to only show the relevant parts.
Every element having a tooltip has an attribute data-has-tooltip.
// event delegation for all mouse down event:
// this ensures that the code also works for elements that have been added to the DOM after that script was executed.
document.addEventListener('mousedown', (evt) => {
// check if the mousedown happened in an element with a tooltip
const element = evt.target.closest('[data-has-tooltip]');
if (element) {
// if the user already clicked on the element ignore the click
if (!element.classList.contains('active')) {
// add the active class to the element so that hover won't show the toolip
element.classList.add('active');
function removeActiveOnLeave() {
// remove the active class
element.classList.remove('active');
// remove the mouseleave event listener again
element.removeEventListener('mouseleave', removeActiveOnLeave)
}
// add an event listener for mouseleave to remove the active class
element.addEventListener('mouseleave', removeActiveOnLeave)
}
}
});
.parent {
display: inline-block;
border: 1px solid red;
padding: 0.5rem;
margin: 0.5rem;
}
.tooltip-wrapper {
display: none;
}
.parent:hover .tooltip-wrapper {
display: block;
}
.parent.active:hover .tooltip-wrapper {
display: none;
}
<div class="content">
<div class="parent" data-has-tooltip>
Hover me A
<div class="tooltip-wrapper">
<span class="tooltip">This is my tooltip A </span>
</div>
</div>
</div>
<div class="content">
<div class="parent" data-has-tooltip>
Hover me B
<div class="tooltip-wrapper">
<span class="tooltip">This is my tooltip B</span>
</div>
</div>
</div>

HTML
<div class="content">
<div class="parent" onClick="myFunction()">
Hover me
<div class="tooltip-wrapper">
<span class="tooltip" id="tooltip">This is mytooltip</span>
</div>
</div>
</div>
Javascript
function myFunction(){
var tooltip=document.getElementById("tooltip");
if (tooltip.style.display=="none") {
document.getElementById("tooltip").style.display="block";
} else {
document.getElementById("tooltip").style.display="none";
}
}

Manipulating 'display' property.
const parent = document.querySelector('.parent');
const toolTip = document.querySelector('.tooltip');
parent.addEventListener('click', () => {
if(toolTip.style.display !== 'none') {
toolTip.style.display = 'none';
}else {
toolTip.style.display = 'grid';
}
});

A solution using jQuery 3.4.1:
$(".parent").click(function () {
$(".tooltip-wrapper").css("display", "none");
});
The only downfall with that solution is once you click and re-hover in the same session, the SCSS :hover doesn't work properly.
No need to stress, just add the following if you want that functionality:
$(".parent").hover(function () {
$(".tooltip-wrapper").css("display", "block");
});
Try it out in the attached snippet:
$(".parent").click(function () {
$(".tooltip-wrapper").css("display", "none");
});
$(".parent").hover(function () {
$(".tooltip-wrapper").css("display", "block");
});
.content {
display: grid;
width: 100vw;
height: 100vh;
place-content: center;
}
.content .parent {
border: 1px red solid;
padding: 10px;
position: relative;
}
.content .parent:hover .tooltip-wrapper {
animation: 0.1s fadeInTooltip;
animation-fill-mode: forwards;
animation-delay: 0.4s;
}
.content .parent:hover:before {
animation: 0.1s fadeInTooltip;
animation-fill-mode: forwards;
animation-delay: 0.4s;
}
.content .parent:active .tooltip-wrapper {
animation: 0.05s fadeOutTooltip;
animation-fill-mode: forwards;
}
.content .parent:active:before {
animation: 0.05s fadeOutTooltip;
animation-fill-mode: forwards;
}
.content .parent:before {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
left: 50%;
transform: translateX(-50%);
opacity: 0;
}
.content .parent .tooltip-wrapper {
position: absolute;
display: grid;
left: 0;
width: 300px;
height: 100%;
opacity: 0;
pointer-events: none;
}
.content .parent .tooltip-wrapper.bottom {
top: calc(100% + 8px);
}
.content .parent .tooltip-wrapper .tooltip {
max-width: 300px;
width: fit-content;
padding: 8px;
position: absolute;
display: inline-block;
background: blue;
border-radius: 5px;
padding: 8px;
color: white;
font-size: 11px;
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
line-height: 1.3;
text-align: left;
}
/* Keyframes */
#keyframes fadeInTooltip {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeOutTooltip {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content">
<div class="parent">
Hover me
<div class="tooltip-wrapper">
<span class="tooltip">This is my tooltip</span>
</div>
</div>
</div>
OR, you can see it working in this Fiddle. with your initial
SCSS.
You can uncomment the second function to see the hover working again after clicking.

Artboard Style Layout Using CSS Transform Scale

I'd like to have the .container and .box scale in and out from the one I clicked on. The problem I'm running into is when I scale in and out, it scales in and out from the first .box div, not the one I clicked on.
Each .box will contain it's own unique content, so when viewing this in "Artboard" view (Zoomed Out), I want people to be able to see what's contained in that particular .box. When people click on one of the boxes, I want it to scale back to (1) to cover the viewport. And if the person is on the 4th .box and they click "Zoom Out", I want it to zoom out from that particular .box.
Each box will be the size of the viewport, which is how it's set up now.
Does anyone have a solution in CSS only? Or is this something that can be better accomplished in JS? I'm not a JS expert, I'm just getting into it, so I'm curious if there's something I can do in some simple JS.
Please see my codepen:
http://codepen.io/jareko999/pen/eZGLZB
HTML
<div class="bar">
<button class="zoomout" onclick="zoomOut()">Zoom Out</button>
</div>
<div class="container">
<div class="artboard">
<div class="box">
<i class="fa fa-diamond"></i>
</div>
<div class="box">
<i class="fa fa-bolt"></i>
</div>
<div class="box">
<i class="fa fa-flag"></i>
</div>
<div class="box">
<i class="fa fa-flask"></i>
</div>
</div>
</div>
CSS
body {
margin: 0;
padding: 0;
height: 100vh;
width: 100%;
background: #e1e1e1;
overflow-y: hidden;
}
.bar {
position: fixed;
display: flex;
flex-direction: row;
box-sizing: border-box;
bottom: 0;
width: 100%;
height: 80px;
background: white;
padding: 14px 0;
z-index: 1;
}
.zoomout {
-webkit-appearance: none;
border: none;
outline: 0;
width: 100px;
height: 40px;
margin: auto;
background: black;
color: white;
border-radius: 10px;
cursor: pointer;
}
.container {
height: 100vh;
width: 100%;
transition: .2s ease-out;
transform: scale(1);
}
.container-small {
height: 100vh;
width: 100%;
transition: .2s ease-out;
transform: scale(.7);
}
.artboard {
height: 100%;
width: 100%;
display: flex;
display: -webkit-flex;
background: #e1e1e1;
}
.box {
padding-top: 44vh;
box-sizing: border-box;
text-align: center;
flex-shrink: 0;
width: 100%;
height: 100%;
box-shadow: 0 2px 4px #a9a9a9;
background: linear-gradient(to right, #276cd6 , #00a651);
transition: .2s ease-out;
transform: scale(1);
}
.box-small {
padding-top: 44vh;
box-sizing: border-box;
text-align: center;
flex-shrink: 0;
width: 100%;
height: 100%;
box-shadow: 0 2px 4px #a9a9a9;
background: linear-gradient(to right, #276cd6 , #00a651);
transition: .2s ease-out;
transform: scale(.9);
cursor: pointer;
}
.box i {
color: #e1e1e1;
font-size: 3em;
}
.overflow {
overflow: hidden;
}
.remove {
display: none;
}
::-webkit-scrollbar {
width: 12px;
height: 4px;
}
/* Track */
::-webkit-scrollbar-track {
background: white;
-webkit-border-radius: 10px;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
-webkit-border-radius: 100px;
border-radius: 100px;
background: #4099ff;
}
JS
$(document).ready(function() {
$('.container').addClass('overflow');
});
function zoomOut() {
$('.bar').addClass('remove');
$('.box').addClass('box-small');
$('.container').removeClass('overflow');
$('.container').addClass('container-small');
}
$('.box').click(function() {
$('.bar').removeClass('remove');
$('.box').removeClass('box-small');
$('.container').addClass('overflow');
$('.container').removeClass('container-small');
});

What you're trying to achieve can be done using a CSS only method.
This method relies on using location hashes (url.com#foobar) and the :target pseudo selector.
The :target pseudo selector allows you to target the element which has the id matching the location hash. For example, imagine you have an element with the id "foobar", the #foobar:target selector will only apply if you have navigated to url.com#foobar. You can create a link with the href attribute pointing #foobar to have a button trigger this pseudo selector.
In your case, you can apply the zoom out styles when the #container location hash is matched, and only show the slide matched by the location hash.
The drawback of this method is that you have to add ids, and add links to actually trigger the :target pseudo class.
My explanation might not be clear, so I put up this demo:
http://codepen.io/ntim/pen/ONxGJd

Transition between CSS background images

In my site I have a switch between a down arrow & and an up arrow. See here: http://jsfiddle.net/4uLghzg7/
Is there a way I can add a slight animation transition when clicked? So it fades in/out between the two icons?
function close_accordion_section(source) {
$(source).parent().find('.accordion-section-title').removeClass('active');
$(source).parent().find('.accordion-section-content').slideUp(300).removeClass('open');
}
$('.accordion-section-title').click(function (e) {
if ($(e.target).is('.active')) {
close_accordion_section(e.target);
} else {
$(this).addClass('active');
$(e.target).parent().find('.accordion-section-content').slideDown(300).addClass('open')
}
e.preventDefault();
});
.accordion {
overflow: hidden;
margin-bottom: 40px;
}
.accordion-section {
padding: 15px;
border: 1px solid #d8d8d8;
background: #fbfbfb;
}
.accordion-section-title {
width: 100%;
display: inline-block;
background-image: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_up_48px-512.png");
background-size: 5% 100%;
background-repeat: no-repeat;
background-position: top right;
}
.accordion-section-title.active {
background: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png") top right no-repeat;
background-size: 5% 100%;
background-repeat: no-repeat;
}
.accordion-section-title.active, .accordion-section-title:hover {
text-decoration: none;
transition: color 0.1s linear;
}
.accordion-section-content {
padding: 15px 0;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="accordion">
<div class="accordion-section"> <a class="accordion-section-title" href="#accordion-1">More information</a>
<div id="accordion-1" class="accordion-section-content">
<p>Text.</p>
<p>
</div>
</div>
</div>

You need a special trick to fade between background-images, you will need two elements, and fade the inner elements opacity:
<div id="arrowUp">
<div id="arrowDown">
</div>
</div>
Demo of your code (modified):
function close_accordion_section(source) {
$(source).parent().find('.arrowDown').removeClass('active');
$(source).parent().find('.accordion-section-content').slideUp(300).removeClass('open');
}
$('.accordion-section-title').click(function(e) {
if ($('.arrowDown').is('.active')) {
close_accordion_section(e.target);
} else {
$('.arrowDown').addClass('active');
$(e.target).parent().find('.accordion-section-content').slideDown(300).addClass('open')
}
e.preventDefault();
});
.accordion {
overflow: hidden;
margin-bottom: 40px;
}
.accordion-section {
padding: 15px;
border: 1px solid #d8d8d8;
background: #fbfbfb;
}
.arrowUp {
width: 20px;
height: 20px;
background-image: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_up_48px-512.png");
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
}
.arrowDown {
opacity: 0;
width: 20px;
height: 20px;
background-color: white;
background-image: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png");
background-size: 100%;
background-repeat: no-repeat;
-webkit-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
}
.arrowDown.active {
opacity: 1;
background-position: center center;
-webkit-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
}
.accordion-section-title.active,
.accordion-section-title:hover {
text-decoration: none;
transition: color 0.1s linear;
}
.accordion-section-content {
padding: 15px 0;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-1">More information</a>
<div class="arrowUp" style="float: right">
<div class="arrowDown">
</div>
</div>
<div id="accordion-1" class="accordion-section-content">
<p>Text.</p>
<p>
</div>
</div>
</div>

you can't actually do much animation on raster background images but if css 3 transition is acceptable you can try something like
.fade-background{
transition: background 1s cubic-bezier(0.55, 0.06, 0.68, 0.19) !important;
}
I added a class "fade-background" on your anchor tag, fiddle here
http://jsfiddle.net/dango_x_daikazoku/4uLghzg7/5/

just write .click function in
$(function() {
});
Try this..
$(function() {
$('.accordion-section-title').click(function (e) {
e.preventDefault();
if ($(e.target).is('.active')) {
close_accordion_section(e.target);
} else {
$(this).addClass('active');
$(e.target).parent().find('.accordion-section-content').slideDown(300).addClass('open')
}
});
});

You could change the arrows to be actual elements (pseudo elements in the following example) and put them on top of each other. Then have the down arrow fade in/out on top of the up arrow to create the effect you're looking for.
// up arrow positioned absolutely
.accordion-section-title:before {
content: '';
position: absolute;
}
// down arrow positioned absolutely
.accordion-section-title:after {
content: '';
opacity: 0;
transition: opacity 0.2s ease;
position: absolute;
}
// animate in down arrow
.accordion-section-title:after {
content: '';
opacity: 1;
position: absolute;
}
jsfiddle working example: http://jsfiddle.net/4uLghzg7/6/
Hopefully this answers what you were asking about.

Expand input field width smoothly on click

I want to display an input field .search when clicking on .icon class. I have managed to do that with following code. However instead of show/hide, I want to display the input field by smoothly expanding its width.
How that can be done?
JSFiddle Demo:
http://jsfiddle.net/9nPW9/
HTML:
<div class="box">
<input class="search" type="search" placeholder="Search" />
<div class="icon"></div>
</div>
CSS:
.box{
position: relative;
width: 220px;
}
.search {
width: 200px;
padding: 5px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
transition: all .5s ease;
float: left;
}
.icon{
width: 20px;
height: 20px;
background: red;
position: absolute;
right: 0;
}
JS:
$('.icon').click(function() {
$('.search').toggle();
});

Why not change your code to toggle a class, thus keeping a clear separation between functionality (JS) and style (CSS)
Below is some sample code, you will likely want to edit for your precise needs.
Demo Fiddle
JS
$('.icon').click(function() {
$('.search').toggleClass('expanded');
});
CSS
.box {
position: relative;
width: 220px;
}
.search {
width: 200px;
max-width:0;
padding: 5px;
transition: all .5s ease;
position:absolute;
right:20px;
box-sizing:border-box;
opacity:0;
}
.search.expanded {
max-width:200px;
opacity:1;
}
.icon {
width: 20px;
height: 20px;
background: red;
position: absolute;
right: 0;
}

You should use .slideToggle() or fadeToggle()
$('.icon').click(function() {
$('.search').slideToggle(500);
});

Blurring fisheye effect on a vertical text menu

I'm searching for existing scripts that will animate a vertical text menu by blurring text and zooming it according to the mouse pointer.
I'm trying to accomplish these actions:
OS X-like movement on mouse hover that can 'zoom' the text in and out
In an un-focused state, the text would be blurred
When a user moved their pointer closer to the text, the text would sharpen.
Here's a Flash example that demonstrates some of the effects, but I'd really prefer to use JavaScript and not use 'down', 'up' and 'select' buttons, naturally.

I'm not sure that you can do this in Javascript...

Here is an open source script that I think could work for you (Or at least after minor modifications)
http://marcgrabanski.com/pages/code/fisheye-menu
And a tutorial on using it:
http://simply-basic.com/tools/fisheye-menu-for-your-website/
Edit:
I realized that the script above probably wouldn't handle text very well. Unfortunately blurring text is not easily done in javascript. It might be possible using the canvas element, but I was unable to find anything in a quick Google search and this would likely not be compatible with older browsers.
Here is another script that has a fisheye effect on text items in a list: http://aleph-null.tv/article/20080522-1839-265.xml/Text-based-Fish-Eye-Effect. This is probably closer to what you're looking for, but it's definitely not as smooth and doesn't allow you to blur text like flash does.

Not a strict answer to this old question, but today you can implement something like this easily with CSS3 (without any javascript):
.fancy-bar {
height: 80px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: flex-end;
}
.fancy-bar .item {
display: inline-block;
margin: 5px;
}
.fancy-bar .item .ball {
width: 40px;
height: 40px;
margin: 0 auto;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.fancy-bar .item-black .ball {
background-color: black;
}
.fancy-bar .item-red .ball {
background-color: red;
}
.fancy-bar .item-green .ball {
background-color: green;
}
.fancy-bar .item-brown .ball {
background-color: brown;
}
.fancy-bar .item-orange .ball {
background-color: orange;
}
.fancy-bar .item:hover .ball {
width: 60px;
height: 60px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
.fancy-bar .item .title {
text-align: center;
font-size: 11px;
font-family: sans-serif;
color: #ccc;
text-shadow: #777 0px 0px 2px;
opacity: 0.8;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s;
}
.fancy-bar .item:hover .title {
font-size: 13px;
opacity: 1;
text-shadow: none;
}
.fancy-bar .item-black:hover .title {
color: black;
}
.fancy-bar .item-red:hover .title {
color: red;
}
.fancy-bar .item-green:hover .title {
color: green;
}
.fancy-bar .item-brown:hover .title {
color: brown;
}
.fancy-bar .item-orange:hover .title {
color: orange;
}
<div class="fancy-bar">
<div class="item item-black">
<div class="ball"></div>
<div class="title">First</div>
</div>
<div class="item item-red">
<div class="ball"></div>
<div class="title">Second</div>
</div>
<div class="item item-green">
<div class="ball"></div>
<div class="title">Third</div>
</div>
<div class="item item-brown">
<div class="ball"></div>
<div class="title">Fourth</div>
</div>
<div class="item item-orange">
<div class="ball"></div>
<div class="title">Fifth</div>
</div>
</div>