I have an icon, and when you hover over it, I would like to have a custom CSS tooltip appear to the right of the icon. Whether or not you scroll up or down the page, the tooltip will always need to appear to the right of the icon.
And no, I don't want to use any plugins. I just want a little JS/CSS to get the job done. If you use JQuery, it needs to be compatible with v1.7, and JQuery-UI: v1.8.
In addition, it needs to be compatible with IE 6 and 7.
I would prefer to leave my elements as siblings, but it looks like under certain circumstances the div that appears needs to be a child element, so it's OK if the HTML needs to be changed.
HTML:
<img src="" class="icon">ICON<img/>
<div class="demo">
STUFF<br/>
STUFF<br/>
STUFF<br/>
STUFF<br/>
STUFF<br/>
</div>
CSS:
.demo {
margin-left: 5px;
padding: 10px;
width: 265px;
height: 110px;
background-color: #ccc;
position: relative;
border: 2px solid #333;
}
.demo:after, .demo:before {
border: solid transparent;
content: ' ';
height: 0;
right: 100%;
position: absolute;
width: 0;
}
.demo:after {
border-width: 11px;
border-right-color: #ccc;
top: 13px;
}
.demo:before {
border-width: 14px;
border-right-color: #333;
top: 10px;
}
Live Example: http://jsfiddle.net/49Js3/16/
Since my reputation isn't high enough to comment on the answer above, I just wanted to add an updated fiddle (based on the above answer) that positions the tooltip absolutely, but with display: inline-block so that it is not fixed to certain position from the left and will show to the right:
here is the important bit:
a.tippy:hover + div {
display: inline-block;
position: absolute;
}
http://jsfiddle.net/7gmv3wo2/
Fiddle here: http://jsfiddle.net/49Js3/29/
I don't have access to IE6, so I don't know whether it's legal. I do know you'll need an anchor to get hover behavior with CSS in IE7 and earlier.
So, I added an anchor around your image, as well as a div to contain the tooltip.
HTML
<div class="outer">
<a class="tippy" href="">
<img src="" class="icon">ICON<img/>
</a>
<div class="demo">STUFF
<br/>STUFF
<br/>STUFF
<br/>STUFF
<br/>STUFF
<br/>
</div>
</div>
And here is the CSS:
.tippy {
text-decoration: none;
}
.outer {
width: 350px;
}
a.tippy:hover + div {
display:block;
float: right;
}
.demo {
margin-left: 5px;
padding: 10px;
width: 265px;
height: 110px;
background-color: #ccc;
position: relative;
border: 2px solid #333;
display: none;
}
.demo:after, .demo:before {
border: solid transparent;
content:' ';
height: 0;
right: 100%;
position: absolute;
width: 0;
}
.demo:after {
border-width: 11px;
border-right-color: #ccc;
top: 13px;
}
.demo:before {
border-width: 14px;
border-right-color: #333;
top: 10px;
}
Related
I am trying to make my modal to be responsive.
I am currently using "right: 405px" in css to make my modal to stick in the right section.
However, the position of the modal keep changes as the screen size of the browser changes, which means this is not responsive.
In the attached screenshot, you can see the "Google Translator Modal" when the "info icon" is clicked.
Could anyone help me write a responsive CSS code?
Thank you.
.google-translator-modal {
position: absolute;
background: #fff;
z-index: 10000;
right: 405px;
top: 40px;
width: 230px;
height: 50px;
border-radius: 3px;
}
<div class="google-translator-modal" style="display: none">
<span class="upward-white-triangle"></span>
<div class="google-translator-modal-content">
powered by
<a class="google-logo-link" href="https://translate.google.com" target="_blank">
<img src="https://www.gstatic.com/images/branding/googlelogo/1x/googlelogo_color_42x16dp.png" width="60px" height="20px" style="padding-top: 3px; padding-left: 3px" alt="Google Translate">
Translate
</a>
</div>
</div>
This a crude example but it ultimately comes down to positioning an absolute positioned element inside of a relative positioned element and showing it on hover.
I have placed the "modal," what I would call a tooltip, inside of the element that appears to be triggering it's appearance. By placing the tooltip inside and relative to the element that triggers it, we don't have to worry about how far from the edge of the viewport we are. The tooltip will always be position relative to the icon in my example.
.translate {
float: right;
margin: 0 1.5rem;
}
.translate-icon {
position: relative;
cursor: pointer;
font-size: 1.5rem;
}
.translate-icon:hover .translate-tooltip {
display: block;
}
.translate-tooltip {
display: none;
position: absolute;
bottom: -1.75rem;
right: -0.35rem;
width: 13rem;
text-align: center;
font-size: 1rem;
border: 1px solid gray;
}
.translate-tooltip::before,
.translate-tooltip::after {
content: '';
position: absolute;
bottom: 100%;
right: 0.25rem;
width: 0;
height: 0;
border: solid transparent;
}
.translate-tooltip::before {
border-bottom-color: gray;
border-width: 9px;
}
.translate-tooltip::after {
border-bottom-color: white;
border-width: 8px;
right: calc( 0.25rem + 1px );
}
<div class="translate">
Select Language
<span class="translate-icon">ω
<div class="translate-tooltip">
Powered by Google Translate
</div>
</span>
</div>
I need to develop a view with similar tooltip which is on github.
I tried using the css but was not able to create the exact ui.
My CSS is as follow
[tooltip] {
display: inline;
position: relative;
}
[tooltip]:hover:after {
background: #333;
background: rgba(0, 0, 0, .8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(tooltip);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 99;
white-space: nowrap;
}
[tooltip]:hover:before {
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
Please advise how can I get the same effect.
For what is worth if you consider bootstrap, similar, or a partial bootstrap installation or related classes, you can achieve this like this:
HTML
<div class="container">
<div class="col-xs-4 col-xs-push-4 martop50">
<div class="input-group">
<span class="input-group-addon">https://</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon"><i class="fa fa-clipboard" data-toggle="tooltip" data-placement="bottom" title="Copy to clipboard"></i></span>
</div>
<span class="download-btn"><button class="btn btn-sm" ><i class="fa fa-download"></i></button></span>
</div>
</div>
CSS
.martop50{
margin-top:50px;
}
.download-btn{
display:inline;
float: left;
margin: 0px 2px;
}
.btn-group-sm>.btn, .btn-sm {
padding: 7px 12px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
.input-group {
position: relative;
display: table;
border-collapse: separate;
width: 88%;
float: left;
}
Tooltip JQUERY
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
The rest of your work would be practically cosmetics and replacing the http:// with a dropdown. That should be fairly easy for you to do.
Here is the DEMO
Try removing , adjusting left:20% , also possibly padding: 5px 15px; at [tooltip]:hover:after
Here's a tooltip that opens downwards.
[tooltip] {
display: inline;
position: relative;
border-bottom: 1px dotted rgba(0,0,0,.21);
}
[tooltip]:hover {
border-bottom: 1px solid transparent;
}
[tooltip]:hover:after {
background: #333;
background: rgba(0, 0, 0, .8);
border-radius: 5px;
top: calc(100% + 3px);
color: #fff;
content: attr(tooltip);
left: 50%;
transform: translateX(-50%);
padding: 5px 15px;
position: absolute;
z-index: 99;
white-space: nowrap;
box-sizing: border-box;
}
[tooltip]:hover:before {
border: solid;
border-color: transparent transparent rgba(0,0,0,.8);
border-width: 6px;
bottom: -3px;
left: calc(50% - 3px);
content: "";
position: absolute;
z-index: 99;
}
<div tooltip="I am tooltip">
I am some content.
</div>
<hr>
Let's see a tooltip on an <span tooltip="Hey, I'm a tooltip, too!">inline element.</span>
However, the way to go here is to have tooltip arguments on the html element and build specific positioning rules for your alignment params (You probably want to have tooltip-position attribute set to top|bottom|left|right and have specific CSS for each case). For example:
[tooltip][tooltip-position="bottom"]:hover:after { /*code here*/ }
From the looks of it, considering the required coding effort and your apparent CSS knowledge, using a library might save you some time. Possible candidates:
Bootstrap Tooltip
jQuery tootip
tooltipster
qtip2
tipped
tooltipsy
These are only a few examples, I'm not endorsing any of them and there are plenty of others. You should research this yourself and decide based on your projects' needs.
I am having issues placing my dT(Date/Time) div at the bottom of it's containing div. I have tried setting bottom: 0px; to no avail. Below is the html and css code I am using.
HTML:
<div class='container'>
<aside>
<img id="user-pic" src="images/blank-user.jpg">
#User_Name
<div id="trend"><h6>TRENDING</h6></div>
</aside>
<section class="main">
</section>
</div>
CSS:
#dT{
width:inherit;
bottom: 0px;
border-top: gray;
background-color: gray;
font-size: small;
}
.container{
margin-top: 80px;
}
section{
margin: auto;
width: 400px;
clear: left;
top: 100px;
}
.tweet{
width: 450px;
height: 225px;
background-color: #FFFFFF;
border: 4px solid #F1433F;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
margin-bottom: 15px;
padding: 25px 15px 0px 15px;
}
.tweetContent{
width: inherit;
height: inherit;
margin: 5px 5px 0 5px;
border-bottom: 1px solid #EEEEEE;
border-top: 1px solid #EEEEEE;
}
There is some JQuery elements within my code that I have not poseted because I do not believe it would have any effect on the positioning of a div.
It appears that the jquery aspect of the code might have something to do with it so here it is.
UPDATE: removed JQuery because it was not relevant.
Add position:relative to parent of your #dT element . Only if it is relative you can control the child elements using left , right , bottom and top.
Update:
And to the child elements for which you want to change position using left add position:absolute
P.S : Need to add relative for the div that contains #dT and absolute for #dT
#parentofdT
{
position:relative;
}
#dT
{
position:absolute
}
Easily pixed with position:absolute;: https://jsfiddle.net/1Lsnjou9/
Good luck.
You should add position: relative or position: absolute property to make the bottom: 0px work
#dT{
width:inherit;
bottom: 0px;
border-top: gray;
background-color: gray;
font-size: small;
position: relative;
}
use position property like position absolute or position relative so as to work with top, left,right,bottom properties
so, i made a simple animated progress bar in jQuery. you can view it here.
I need some code in this post, so here's my CSS:
.progress {
height: 14px;
width: 300px;
background: #111;
border-radius: 5px;
vertical-align: middle;
display: inline-block;
overflow: hidden;
color: white;
}
.filename {
font-size: 10px;
color: white;
position: relative;
}
.progresstop {
padding: 4px;
width: 40px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
height: 8px;
float: left;
background: #c44639;
vertical-align: middle;
display: inline-block;
}
.arrow-right {
width: 0px;
height: 0px;
border-style: solid;
background: #111;
border-width: 7px 7px 7px ;
border-color: transparent transparent transparent #c44639;
float: left;
display: inline-block;
}
my question: as the progress bar reaches the end, the elements "pop" out of existence when they overflow the div and are hidden, instead of staying visible until they're completely out of the div. specifically, when the CSS arrow disappears as it reaches the end, the end of the progress bar changes from a triangle to a line, which is really visually jarring. is there any way to change this behavior, either in CSS or jQuery, to have elements hide "smoothly"?
Altenatively to JoshC's answer,
you could wrap it in a container like this fiddle
HTML
<div id="progress-container">
<div class='progress'>
<div class='progresstop'></div>
<div class='arrow-right'></div>
<div class='filename'>FILENAME</div>
</div>
</div>
CSS
#progress-container {
height: 14px;
width: 300px;
background: #111;
border-radius: 5px;
vertical-align: middle;
display: inline-block;
overflow: hidden;
color: white;
}
.progress {
height: 14px;
width: 500px; /* large value */
}
Just make sure that the .progess width is larger than what you need (text, arrow, and bar)
You are looking for white-space: pre.
Here is an updated example - it works how you want it to now.
.filename {
white-space: pre;
}
EDIT
If you want to remove the glitch at the end of the animation (where the arrow jumps to a new line), use the following markup/CSS:
jsFiddle example - less HTML now, since the arrow is a pseudo element.
HTML
<div class='progress'>
<div class='progresstop'></div>
<div class='arrow-right'></div> /* Removed this, and made the arrow a psuedo element. */
<div class='filename'>FILENAME</div>
</div>
CSS
.filename:before {
content:"\A";
width: 0px;
height: 0px;
border-style: solid;
border-width: 7px 7px 7px;
border-color: transparent transparent transparent #c44639;
position:absolute;
}
I have div containing the background image but i want to make that image as clickable and pointed to somewhere site. Is it possible to do this in css or jquery
HTML:
<div id="logincontainer">
</div>
css :
#loginContainer {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: url("http://s3.buysellads.com/1237708/176570-1371740695.gif")
no-repeat scroll center center #FF660D; /*for example */
border-color: #FFFFFF;
border-image: none;
border-right: medium solid #FFFFFF;
border-style: none solid solid;
border-width: medium;
left: 0;
margin-left: auto;
margin-right: auto;
position: fixed;
min-height:200px;
right: 0;
top: 0;
vertical-align: super;
width: 100%;
z-index: 9999999;
}
Here is the http://jsfiddle.net/a39Va/16/
I am not sure is there is a way to make the background image as clickable which is pointed in div?
Any suggestion would be great.
Just do something like:
<div id="loginContainer'></div>
Or you can do that as well via JavaScript and jQuery
$('#loginContainer').click(function(e) { <Whatever you want to do here> });
You need to fix the z-index of the background element, and as others have said, add an anchor or a javascript action. Also, I added some sample of the rest of the content on the page. You need to see how the two interact with each other.
Here's an updated jsFiddle
HTML
<div id="loginContainer">
</div>
<div class="content">
<p>Something</p>
</div>
CSS
#loginContainer {
background: url("http://s3.buysellads.com/1237708/176570-1371740695.gif")
no-repeat center #FF660D;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
position: fixed;
z-index: 1;
}
#loginContainer a {
display: block;
height: 100%;
width: 100%;
}
.content {
z-index: 2;
position: relative;
width: 200px;
height: 100px;
background: #fff;
margin: 30px 0 0 30px;
}
Here's a Fiddle
HTML
<div id="logincontainer" data-link="http://google.com"></div>
jQuery
$(function() {
$('#logincontainer').hover(function() {
var divLink = $(this).attr('data-link');
$(this).wrap('');
});
});
Why not using an anchor ?
<a href="link" id="logincontainer">
</a>
i updated your jsFiddle
otherwise :
you can click on any element to behave like a link with jQuery.
you can surround your <div> in an anchor if you use the html5 <!DOCTYPE> ( Otherwise invalid )