Show and hide tooltips with CSS and Javascript - javascript

I use CSS to show and hide tooltips when I hover over them. Now I need this to work for mobile devices with a click function. I got the first tooltip running through toggling a class via Javascript. How can I apply that function for all tooltips now? I have around 30 to 40. Any idea how I can achieve my goal?
document.getElementById("website-tooltip-container").addEventListener("click", function() {
var element = document.getElementById("test");
element.classList.toggle("website-tooltiptext-visible");
});
/* Tooltip Container */
.website-tooltip {
position: relative;
display: flex;
justify-content: center;
cursor: pointer;
font-family: Roboto;
font-size: 18px;
font-weight: 400;
color: #666;
}
/* Tooltip text */
.website-tooltip .website-tooltiptext {
visibility: hidden;
max-width: 350px;
font-family: open sans;
font-size: 13px;
line-height: 22px;
background-color: #FFFFFF;
color: #666;
text-align: left;
padding: 11px 15px 11px 15px !important;
border-radius: 3px;
box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.5);
/* Position the tooltip text */
position: absolute;
z-index: 1;
top: 100%;
margin: 0px 0px 0px 0px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.website-tooltip:hover .website-tooltiptext {
visibility: visible;
}
/* Hide when hovering over tooltip div */
div.website-tooltiptext:hover {
display: none;
}
/* Toggle this class to show Tooltip on click via Javascript */
.website-tooltiptext-visible {
visibility: visible !important;
display: block !important;
}
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 1</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 2</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 3</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
<div id="website-tooltip-container" class="website-tooltip"><span class="dottedunderline">Tooltip 4</span>
<div id="test" class="website-tooltiptext">Blabalabalbalablablabla.
</div>
</div>
Thanks for your help!

use an extra class.
add this to your css:
.website-tooltiptext-visible {
visibility: visible !important;
}
and replace this class inside your js code:
element.classList.toggle("website-tooltiptext-visible");
PS: NEVER use same id for multiple HTML elements. like ever!
EDIT: use below javascript code to select by class
Array.from(document.getElementsByClassName("website-tooltiptext")).forEach(
(element) => {
element.addEventListener("click", () => {
element.classList.toggle("website-tooltiptext-visible");
});
}
);

Related

keep a div active after selecting it using ajax jquery

I am using ajax to to show data from data base.
Basically it's a chat app, and when user clicks on certain conversation it appends the data to a view.
My conversation div is:
<div class="kt-widget__item">
<span class="kt-media kt-media--circle">
<img src="{{ asset('media/users/100_4.jpg') }}" alt="image">
</span>
<div class="kt-widget__info">
<div class="kt-widget__section">
Teresa Fox
</div>
<span class="kt-widget__desc">
PR Executive
</span>
</div>
<div class="kt-widget__action">
<span class="kt-widget__date">4 Days</span>
</div>
</div>
and a demo CSS for this div is:
.kt-widget__item {
cursor: pointer;
background: darkgrey;
border-radius: 8px;
font-size: 15px;
color: black;
height: 100px;
width: 100%;a
display: flex;
align-items: center;
}
.kt-widget__item:hover {
cursor: pointer;
border-radius: 10px;
border: 1px solid darkgrey;
background: rgb(187, 184, 184);
font-size: 15px;
color: black;
height: 100px;
width: 100%;
margin: auto;
}
.kt-widget__item:active {
border-radius: 10px;
border: 1px solid rgb(156, 155, 155);
background: rgb(156, 155, 155);
}
Now I want to make the selected div active. How can this be done?
Regards
Saad
Important: It is not possible to set the :active pseudo-class of an element with JavaScript. An element becomes active when a user activates it (typically with a mouse click), and becomes inactive when the user de-activates it (typically by un-clicking the mouse).
To ensure that a div looks like it is active, you should first set a tabindex attribute on the div, making it focusable.
Ref: tabindex
Then, to mimic the active appearance, add a div:focus CSS rule that exactly matches the div:active rule.
Finally, simply create the fake "active" appearance by calling HTMLElement.focus().
Remove the fake "active" appearance by calling HTMLElement.blur().
Example:
const fdiv = document.getElementById('focusable');
const btn = document.getElementById("addfocus");
btn.onclick = function() {
fdiv.focus();
};
const btn2 = document.getElementById("removefocus");
btn2.onclick = function() {
fdiv.blur();
};
div {
border: 1px solid black;
background-color: #ccc;
width: 50%;
height: 30px;
margin: 12px 0;
}
div:active,
div:focus {
background-color: dodgerblue;
outline: none;
}
<div id="not-focusable">I'm clickable but not focusable, click me</div>
<div id="focusable" tabindex="0">I'm focusable, click me</div>
<button id="addfocus">Focus the div</button>
<button id="removefocus">Blur the div</button><br/>

How to align the content shown in the image using JavaScript along with redirecting to another page

I am bit troubled in aligning the content as shown in the image. Along with that I need to redirect to page 1 by clicking on content section and redirect to page 2 by clicking the icon separately. How can I solve it using javascript?
These things can be achieved without the use of JavaScript besides the point that it's generally bad practice to manipulate DOM with JavaScript as much can be done with css rules, animations, basic html.
To align the icon first you should try these css rules applied on icon element:
.your-icon {
top: 0;
right: 0;
}
Assuming your icon in html is declared like this:
<img src="foo.img" class="your-icon">
Although it depends on current rules applied (e.g. you should use other rule set if flex is enabled on parent element). Perhaps spacing with fixed values between content section is involved that is pushing the icon out of the way (padding, margin rules applied?).
As for navigation html href is good enough
.a {
/* width:400px; */
height: 300px;
border: 1px solid;
}
.b {
width: 100%;
float: left;
/* border:1px solid red; */
}
.c {
width: 70%;
/* border:1px solid; */
float: left;
/* display:flex; */
float: left;
}
.c div{padding: 5px;}
.d {
border: 1px solid;
}
.box {
width: 29%;
float: left;
border: 1px solid;
height: 100%;
}
.rTable {
display: block;
width: 100%;
}
.rTableHeading,
.rTableBody,
.rTableFoot,
.rTableRow {
clear: both;
}
.rTableHead,
.rTableFoot {
/* background-color: #DDD; */
font-weight: bold;
}
.rTableCell,
.rTableHead {
/* border: 1px solid #999999; */
float: left;
height: 17px;
overflow: hidden;
padding: 5px;
width: 20%;
}
.rTable:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
<div class='a'>
<div class='b'>
<div class='c'>
<div>Name</div>
<div>Address</div>
<div>PIN</div>
</div>
<div class='box'>ICON</div>
</div>
<div class='d'>
<div class="rTable">
<div class="rTableRow">
<div class="rTableHead"><strong>Time</strong></div>
<div class="rTableHead"><span style="font-weight: bold;">Duration</span></div>
<div class="rTableHead"><strong>Amount</strong></div>
<div class="rTableHead"><strong>Position</strong></div>
</div>
<div class="rTableRow">
<div class="rTableCell">5</div>
<div class="rTableCell">2</div>
<div class="rTableCell">3</div>
<div class="rTableCell">4</div>
</div>
</div>
</div>
</div>

How to add active class with JQuery on a custom element?

I have made a custom card component with plain html and css. This is my code for HTML:
<div class="item">
<div class="item-content">
<div class="item-title">
Title 1
</div>
<div class="item-subtitle">
<label>test, test, test</label>
<i class="icon-basket remove-item"></i>
</div>
</div>
</div>
And this is my css code for the styling:
.item {
margin-top: 10px;
margin-left: 20px;
margin-right: 20px;
padding-top: 15px;
padding-bottom: 15px;
box-shadow: 0px 4px 10px rgba(176, 176, 176, 0.2);
}
.item:hover {
cursor: pointer;
background-color: #EEF5FF;
}
.item-title {
font-weight: 600;
padding-left: 24px;
}
.item-subtitle {
padding-left: 24px;
font-weight: 100;
}
.item-subtitle label {
width: calc(100% - 64px);
display: inline-block;
padding-top: 10px;
}
The card component is looking good. Now I want to add an active class to the item. I have made a hover and when I click on the item and I want that the hover color stays (active).
This is my JQuery code:
$(document).ready(function(){
$('item').click(function(){
$('item').removeClass("active");
$(this).addClass("active");
});
});
The hover is working good but when I click on it the background-color doesn't stay active.
I have made a jsfiddle so you can see the behaviour:
https://jsfiddle.net/gvu9nk8d/2/
Can someone point me in the right direction?
Two things you need to correct
1. your jquery click event selector is missing dot for class item
2. You need to add class active in the CSS
$(document).ready(function(){
$('.item').click(function(){ //added dot here
$('.item').removeClass("active");//added dot here
$(this).addClass("active");
});
});
.item {
margin-top: 10px;
margin-left: 20px;
margin-right: 20px;
padding-top: 15px;
padding-bottom: 15px;
box-shadow: 0px 4px 10px rgba(176, 176, 176, 0.2);
}
.item:hover, .item.active { /* added class here*/
cursor: pointer;
background-color: #EEF5FF;
}
.item-title {
font-weight: 600;
padding-left: 24px;
}
.item-subtitle {
padding-left: 24px;
font-weight: 100;
}
.item-subtitle label {
width: calc(100% - 64px);
display: inline-block;
padding-top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="item">
<div class="item-content">
<div class="item-title">
Title 1
</div>
<div class="item-subtitle">
<label>test, test, test</label>
<i class="icon-basket remove-item"></i>
</div>
</div>
</div>
JSFiddle Demo
You are missing the dot at class item
$(document).ready(function(){
$('.item').click(function(){
$('.item').removeClass("active");
$(this).addClass("active");
});
});
The problem with your code was that you have used the wrong selector.
It should be $('.item') since item is a class. Then the active class will be added
Also include some style to make changes when the item is active

JavaScript - Class toggling is removing the class and not adding in next click

I have set an eventlistener on i tag with class=glyphcolor What I want to do is that whenever I see an element of class checkglyph1 it has to toggle the class i.e if class is there it has to be removed and if not add.What the checkglyph1 class does is it changes the color of the text.
Actual Result
(image to the output I get)
At first click I see that first element is toggled here by default I have already set it.On next click it gets removed instead of the toggle .
HTML section:
<div class="row datasection">
<div class="todo">
<div class="databox col s6 waves-effect">
<p class="checkglyph1 ">Task to do</p>
<!-- </div> -->
<a>
<i class="material-icons checkglyph checkglyph1 glyphcolor">check</i>
</a>
</div>
</div>
</div>
JS:
var glyph= document.querySelector('.glyphcolor');
var par= document.getElementsByClassName('checkglyph1');
console.log(par[0]);
console.log(par[1]);
glyph.addEventListener('click', function () {
/* body... */
console.log("Qw");
par[0].classList.toggle("checkglyph1");
console.log(par[0]);
par[1].classList.toggle("checkglyph1");
})
CSS:
.datasection .todo .databox {
background-color: teal;
margin-left: 120px;
border-radius: 10px;
position: relative;
display: inline-block;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.databox p{
display: inline-block;
}
.databox a .checkglyph{
display: inline-block;
color: yellow;
position: absolute;
left: 90%;
top: 25%;
}
.databox a .checkglyph:hover{
display: inline-block;
}
.databox a .checkglyph1{
display: inline-block;
color: white;
cursor: pointer;
}
.databox .checkglyph1{
color: white;
cursor: text;
}
getElementsByClassName is a LIVE Html Collection. Remove the class, the item is removed from the collection.
var elems = document.getElementsByClassName("foo")
console.log("before", elems.length);
elems[0].classList.remove("foo");
console.log("after", elems.length);
.foo { color: red; }
<div class="foo">1</div>
<div class="foo">2</div>

Jquery & CSS - Overlapping divs

I'm trying to create a expnd divs when user mouse over with Jquery and CSS.
My jsFiddle works great into Opera Browser but into Chrome when i hover the box "B" and return to box "A" this is overlaped by the box "B". How to solve it?. Here's my code block:
HTML:
<div id="box">
<div class="inner" id="01">
<a href="#" class="block">
<span id="s01" class="s01">A</span>
</a>
</div>
<div class="inner" id="02">
<a href="#" class="block">
<span id="s02" class="s01">B</span>
</a>
</div>
</div>
CSS:
body {
background-color:navy;
}
#box {
height: 92px;
_height: 92px;
width: 290px;
_width: 270px;
float: left;
margin-left: 9px;
margin-top: 48px;
margin-bottom: 31px;
margin-right: 26px;
background-color: #FFF;
_overflow:hidden;
}
.inner {
height: 90px;
width: 141.6px;
_width: 121.6px;
background-color: #FFFFFF;
float: left;
padding-top: 0px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
color: #2DA2A8;
cursor: pointer;
z-index:0;
}
.s01 {
text-align: center;
display: block;
height:100%;
cursor: pointer;
padding-top: 36px;
}
.block {
color:#399;
}
JS:
$(document).ready(function(){
$("#01").mouseover(function(){$(this).css({
transition:"all 1s",transform:"scale(1.2)","z-index":"2",
"background-color":"#24C9C4","border-top":"solid 1px white",
"border-bottom":"solid 1px white"})})
$("#01").mouseout(function(){$(this).css({
transition:"all 1s",transform:"scale(1.0)","z-index":"0",
"background-color":"#FFF","border-top":"none",
"border-bottom":"none"})})
$("#02").mouseover(function(){$(this).css({
transition:"all 1s",transform:"scale(1.2)","z-index":"2",
"background-color":"#24C9C4","border-top":"solid 1px white",
"border-bottom":"solid 1px white"})})
$("#02").mouseout(function(){$(this).css({
transition:"all 1s",transform:"scale(1.0)","z-index":"0",
"background-color":"#FFF","border-top":"none",
"border-bottom":"none"})})
});
Probably the neatest way to solve this is to add position:relative to the divs, this will enable z-index to work.
If you don't do this, the divs are defaulted to position:static which ignores z-index, see: Why is z-index ignored with position:static?
There is more information here, which explains why it works in Opera but not Chrome: http://yagudaev.com/posts/getting-reliable-z-index-cross-browser/
position:absolute would work as well if you wanted to use that instead, but you would need to specify exactly where you want the divs to be placed.
Updated your fiddle: http://jsfiddle.net/ua444/1/
You already had a class on those divs so the only change is:
.inner {
position: relative;
}
I've forked and updated your fiddle.
The z-index and relative positioning should work:
http://jsfiddle.net/robertp/y48BD/
I removed the z-index manipulation from the JavaScript and used :hover state to change the z-index instead:
.inner {
...
position: relative;
}
.inner:hover {
z-index: 1;
}
I hope this is something you've been after.

Categories