I'm using following jQuery to style my tooltips
$(function() {
// select all desired input fields and attach tooltips to them
$("#tooltips :input").tooltip({
// place tooltip on the right edge
position: "center left",
// a little tweaking of the position
offset: [-2, 10],
// use the built-in fadeIn/fadeOut effect
effect: "fade",
});
});
and my CSS is
#myform {
height: auto;
}
#tooltip{
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
background-color: #fff !important;
border: 1px solid !important;
border-radius: 5px;
border-color: #bbb #bbb #a8a8a8;
padding: 16px;
z-index: 2000 !important;
width: 255px;
line-height: 17px;
top: 48px;
margin-left:-16px !important;
font-style: italic;
color: #7d7d7d;
font-size: 13px;
-webkit-transition: all 0.218s;
-moz-transition: all 0.218s;
-o-transition: all 0.218s;
transition: all 0.218s;
}
#tooltip:after {
content: '';
position: absolute;
border: 3px solid rgba(51, 51, 51, 0.9);
border-color: transparent white;
border-width: 8px 0 8px 7px;
top: 40%;
right: -6px;
}
#tooltip:before {
content: '';
position: absolute;
border: 2px solid #333;
border-color: transparent #000;
border-width: 8px 0 8px 6px;
top: 40%;
right: -6px;
}
I'd like to change the CSS name to anything else rather than tooltip, but when i change my CSS name the tooltip doesn't work.
Any help would be appreciated
Not sure what you are trying to ask, but if you want to replace 'tooltip' with any other string like 'test' in CSS then you will have to replace same string inside $('#tooltip :input') by same name $('#test :input').
update the jQuery selector accordingly. For ex if want to name it anyRandomName then
selector should be
$("#anyRandomName:input").tooltip({
//...
});
Also make sure the element on which you want to show tootip have id as anyRandomName
Related
In Discord web app, when clicking & holding on a navbar (Server) button, it shifts a little bit down as shown in this GIF : https://imgur.com/a/bC25LtO
How can I achieve this effect in CSS, or maybe CSS & JS?
You can use pseudo :active and position absolute
.btn {
position: relative;
top: 0px;
font-family: "Open Sans";
text-decoration: none;
font-size: 25px;
padding: 15px 50px;
margin: 0 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0px 5px 0px #ccc;
transition: all 250ms ease;
}
.btn:active {
position: relative;
top: 5px;
box-shadow: none !important;
transition: all 250ms ease;
}
<button class="btn">press me</button>
or use :active with translateY()
I've created a button that looks like a document with a label below it by moving the button's text outside of its self with position absolute:
$('.item-title').hover(function() {
$(this).parent().addClass('hover');
}, function() {
$(this).parent().removeClass('hover');
});
$('.item-title').on('click', function() {
alert('test this')
});
.item-button {
position: relative;
width: 110px;
height: 150px;
background: #eee;
border: #fff solid 2px;
box-shadow: 0 0 10px #ccc;
transition: all 0.5s ease;
margin: 25px;
margin-bottom: 40px;
}
.item-button:hover {
color: black;
text-shadow: 1px 1px #fff;
border: #fff solid 2px;
box-shadow: 0 0 20px #999;
}
.hover {
color: black;
text-shadow: 1px 1px #fff;
border: #fff solid 2px;
box-shadow: 0 0 20px #999;
}
.item-title {
position: absolute;
top: 160px;
left: 0;
width: 100%;
text-align: center;
font-size: 10pt;
line-height: 15px;
z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="item-button"><span class="item-title">File Title</span></button>
However I can't seem to get the label that's now floating outside the control to react at all to any mouse events. How can I get it to be clickable and pass its hover state back to its parent?
Edit: Seems this is a browser specific issue to firefox, works correctly in Chrome and IE.
Have you tried to write "e.stoppropagation()" in the click event of the label. this will stop the label to push events to its parents.
Update: I tried binding a click event to your label and it works without an issue,
$('.item-title').on('click',function(){
alert('test this')});
Edit your Css code :
.item-button {
position: relative;
width: 110px;
height: 150px;
background: #eee;
border: #fff solid 2px;
box-shadow: 0 0 10px #ccc;
transition: all 0.5s ease;
margin: 25px;
margin-bottom: 40px;
z-index : 888;
}
.item-button:hover {
color: black;
text-shadow: 1px 1px #fff;
border: #fff solid 2px;
box-shadow: 0 0 20px #999;
}
.hover {
color: black;
text-shadow: 1px 1px #fff;
border: #fff solid 2px;
box-shadow: 0 0 20px #999;
}
.item-title {
position: absolute;
top: 160px;
left: 0;
width: 100%;
height: 100%;
text-align: center;
font-size: 10pt;
line-height: 15px;
z-index: 999;
}
I want to make a pure CSS modal window, I found this example.
my problem is that the modal windows is shown quickly then disappear on load. when I clic, all is fine. WhenI try the sample olone, it works great, but when I embed it into my huge code, I see this flashing modal window
How can I stop it to do that flash onload ?
HTML
Open Modal
<div id="openModal" class="modalDialog">
<div> X
<h2>Modal Box</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
</div>
</div>
My CSS
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
I changed your fiddle a bit. Instead of transitioning the opacity I put the transition on the background, transitioning the rgba from
background: rgba(0,0,0,0.0);
to
background: rgba(0,0,0,0.8);
I also removed the opacity entirely. Hopefully this will work in your environment.
Fiddle: http://jsfiddle.net/GG9Sa/1092/
I am following a tutorial found here and I can't seem to get it to show up. I am using a bootstrap enabled website so I am not sure if that is the problem. I've been at it for two hours and can't seem to get anywhere. My button that I want users to click on in order to bring up the popup looks like this: Contact Me The framework for the popup looks like this:
<div id="openModal" class="contactus">
<div>
X
<h2>Title</h2>
<p>Content</p>
</div>
</div>
The CSS document looks like:
.contactus {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.contactus:target {
opacity:1;
pointer-events: auto;
}
.contactus > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover { background: #00d9ff; }
I have JavaScript enabled on my browser it if you click on it, you can't scroll up on the page unless you press "Esc" so I think it's puling up, you just can't see it. I was thinking it had something to do with z-index: 99999; but I don't know what that does exactly.
Any ideas??
In my design I have a div with 0 height (its height will be increased via some JS code on some anchor click) and a textbox. The HTML is:
<div class="container">
<textarea class="foo-textarea"></textarea>
<div class="foo">
<ul>
<li>Test1</li>
<li>Test1</li>
...
</ul>
</div>
</div>
and the following CSS:
.foo { -webkit-box-shadow: rgb(116, 117, 117) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.74902) 0px 24px 30px 0px; -webkit-transition-delay: 0s; -webkit-transition-duration: 0.3499999940395355s; -webkit-transition-property: height; -webkit-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); box-shadow: rgb(116, 117, 117) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.74902) 0px 24px 30px 0px; color: rgb(85, 85, 85); display: block; font-family: 'lucida grande' , tahoma, verdana, arial, sans-serif; font-size: 11px; height: 0px; left: 20px; line-height: 18px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; overflow-x: hidden; overflow-y: hidden; position: absolute; left: 0px; top: 0px; width: 642px; z-index: 99; cursor: pointer; }
.foo-textarea { -webkit-appearance: none; -webkit-background-clip: border-box; -webkit-background-origin: padding-box; -webkit-background-size: auto; -webkit-border-image: none; -webkit-box-orient: vertical; -webkit-box-shadow: rgba(0, 0, 0, 0.0352941) 0px 0px 0px 0px inset; -webkit-rtl-ordering: logical; -webkit-transition-delay: 0s, 0s; -webkit-transition-duration: 0.20000000298023224s, 0.20000000298023224s; -webkit-transition-property: border, box-shadow; -webkit-transition-timing-function: linear, linear; -webkit-user-select: text; -webkit-writing-mode: horizontal-tb; background-attachment: scroll; background-clip: border-box; background-color: rgba(0, 0, 0, 0); background-image: none; background-origin: padding-box; background-size: auto; border-bottom-color: rgb(223, 223, 223); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(223, 223, 223); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(223, 223, 223); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(223, 223, 223); border-top-left-radius: 3px; border-top-right-radius: 3px; border-top-style: solid; border-top-width: 1px; box-shadow: rgba(0, 0, 0, 0.0352941) 0px 0px 0px 0px inset; box-sizing: border-box; color: rgb(85, 85, 85); cursor: auto; display: block; font-family: 'Helvetica Neue' , Helvetica, Arial, sans-serif; font-size: 12px; font-weight: normal; height: 140px; letter-spacing: normal; line-height: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 10px; margin-top: 0px; min-height: 20px; outline-color: rgb(85, 85, 85); outline-style: none; outline-width: 0px; overflow-x: hidden; overflow-y: hidden; padding-bottom: 9px; padding-left: 9px; padding-right: 9px; padding-top: 9px; position: relative; resize: none; text-align: start; text-indent: 0px; text-shadow: none; text-transform: none; vertical-align: middle; white-space: pre-wrap; width: 642px; word-spacing: 0px; word-wrap: break-word; writing-mode: lr-tb; }
The live JS Fiddle for the above code is http://jsfiddle.net/VHsKc/1/.
My issue is that when I hover the textbox I am seeing hand cursor over it. It can be because of "cursor:pointer" style applied on div having "foo" class and at this moment it is behind the textbox with absolute positioning (position: absolute;left: 0px; top: 0px;). But it is having 0 height at this moment then why it is showing hand cursor? Can this be fixed? I don't want the "foo" div classes getting applied when I am hovering the textbox.
The way I would do it is set .foo to display: none;. In your jQuery, since I assume you want to animate the height element, set the css display to block first, then do your animation.
TRIGGER
$('.foo').css('display','block');
$('.foo').animate(YOUR ANIMATION);
Set the z-index on .foo to -1. In the click() handler that increases its height, change .foo's z-index property back to 99.
Set the LI items to height 0 and overflow hidden.
http://jsfiddle.net/VHsKc/4/
.foo li {
height: 0;
overflow: hidden;
}
you might need to set the height to auto for the LIs later depending on needs