Im creating a css only tooltip for my new website project.
This tooltip shows right on touchdevises. The only problem is that touchdevises can't close the tooltip.
How can I modify the code that touchscreen users can close the tooltip if they touch somewhere around the tooltip? Or maybe if they touch on the tooltip visible text link?
I just want to use css if possible.
The CSS that I have:
a.tooltip {outline:none;}
a.tooltip strong {line-height:30px;}
a.tooltip:hover {text-decoration:none; cursor: help;}
a.tooltip span {
z-index:10;display:none; padding:14px 20px;
margin-top:-30px; margin-left:28px;
width:220px; line-height:17px;
}
a.tooltip:hover span{
display:inline; position:absolute; color:#373535;
border:2px solid #D3D3D3; background:#fffFff;}
/*CSS3 extras*/
a.tooltip span
{
border-radius:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 1px 1px 8px #CCC;
-webkit-box-shadow: 1px 1px 8px #CCC;
box-shadow: 1px 1px 8px #CCC;
}
This is the html:
Normal Text<span><strong>Tooltip title</strong><br />This would be the content of the tooltip.</span>
Thanks for help me out guys!
Regards, Dylan
I got no problems as u describet but i tryed this and it works even better on my device. So check it that helps you.
Fiddle
HTML:
<a href="#" class="tooltip">
Normal Text
</a>
<span>
<strong>Tooltip title</strong><br />
This would be the content of the tooltip.
</span>
CSS:
a.tooltip {
outline:none;
}
a.tooltip strong {
line-height:30px;
}
a.tooltip:hover {
text-decoration:none;
cursor: help;
}
span {
z-index:10;display:none;
padding:14px 20px;
margin-top:-30px;
margin-left:28px;
width:220px;
line-height:17px;
}
a.tooltip:hover + span{
display:inline; position:absolute; color:#373535;
border:2px solid #D3D3D3; background:#fffFff;}
/*CSS3 extras*/
span {
border-radius:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 1px 1px 8px #CCC;
-webkit-box-shadow: 1px 1px 8px #CCC;
box-shadow: 1px 1px 8px #CCC;
}
Related
The problem is when I set black button background, white color, white 4px border and then border-radius say 5px the black pieces appear in the corners of the button. It happens with <input> and <button> elements. <div> tags don't suffer from it.
Is it normal and does somebody know how it could be fixed?
CodePen
HTML:
<div id=a>
<div id=b>Button</div>
<br>
<input id="but1" type="button" value="Button" />
<button id="but2">Button</button>
</div>
CSS:
div#a {
background:rgb(255, 250, 204);
width:200px;
height:120px;
padding:10px;
}
div#b {
border: 4px solid white;
padding: 5px;
background: black;
width: 70px;
color:white;
border-radius: 5px;
text-align:center;
}
#but1 {
border: 4px solid yellow;
padding: 5px;
background: black;
width: 70px;
color:white;
-moz-border-radius: 5px;
border-radius: 5px;
text-align:center;
}
#but2 {
border: 4px solid white;
padding: 5px;
background: black;
width: 70px;
color:white;
-moz-border-radius: 5px;
border-radius: 5px;
text-align:center;
}
Thank you for your answer, robjez.
Recently I've found almost the same solution. I used padding-box for the background-clip but with the background-color instead of background. Cause with the background property it only works when the background-clip is in the end of the rule. I guess it's because of the cascading inside CSS rules. And if I use background-color it works with any order of properties.
#but1 {
padding: 5px;
width: 70px;
border-radius: 5px;
color:white;
background-clip:padding-box;
background-color: black;
border: 4px solid yellow;
}
CodePen
This is kind of browsers's bug, to avoid that you need to use background-clip, like so:
#but1 {
padding: 5px;
width: 70px;
background: black;
color:white;
border: 5px solid yellow;
border-radius: 5px;
/* Prevent background color leak outs */
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip:padding-box;
}
This is described here and here
Hope this will help
I have a dropdown list menu with small triangle pointer, when I hover the first item I want the small triangle also change to black color.
This is my JS Fiddle, Thanks.
CSS
.username .messages {
position:absolute;
margin:22px 0px 0px -70px;
width:200px;
max-height:auto;
color:black;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
.username .messages:before {
content:'.';
display:block;
position:absolute;
margin-left:-10px;
left:50%;
top:-18px;
width:0;
height:0;
border:10px solid black;
color:black;
border-color:transparent transparent #fff;
}
Place the arrow as the before pseudoelement of the first link
Example fiddle: http://jsfiddle.net/ebcho06a/5/
.messages a:first-child:before {
content:'';
display:block;
position:absolute;
margin-left:-10px;
left:50%;
top:-20px;
width:0;
height:0;
border:10px solid black;
color:black;
border-color:transparent transparent #fff;
}
.messages a:first-child:hover:before {
border-color:transparent transparent #000;
}
Effect on mouseover
I'm trying to create a triangle clickable button like div, in the attached image is what I want to actually achieve. image
This is what I've reached so far,JsFiddle
HTML:
<div class="input"><</div>
CSS:
body {padding:40px;}
.input {
text-decoration:none;
padding:5px 10px;
background:#117ebb;
font-size:9px;
color:#fff;
border-radius:5.5px 0px 0px 5px;
box-shadow: 0px 5px 3px #003355;
position:relative;
width:1px;
height:12px;
}
.input:after {
position:absolute;
top:0px;
left:-10px;
content:" ";
width: 0;
height: 0px;
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
border-right:13px solid #117ebb;
border-radius:0px 0px 0px 20px;
}
css pure triangle and with jquery you could add click events:
html
<div class="input"></div>
jquery
$(document).ready(function(){
$(".input").click(function(){
alert('hello arrow');
});
});
css
body {padding:40px;}
.input{
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
cursor: pointer;
}
http://jsfiddle.net/TvJ6t/
I would like to center the following 2 buttons side by side rather than underneath one another. Here is an example of how it is looking at the moment on JS Fiddle
Could you advise me the best way to handle this? Any help is really appreciated.
Define display:inline-block to your anchor tags & define text-align:center to it's parent. Write like this:
a.button {
display:inline-block;
*display:inline;/* For IE7 */
*zoom:1;/*For IE7*/
padding: 3px 10px 3px 10px;
width:50px;
margin-left:auto;
margin-right:auto;
text-align: center;
color: #636363;
text-decoration: none;
border-top: solid 1px #ccc;
border-left: solid 1px #ccc;
border-bottom: solid 1px #ccc;
border-right: solid 1px #ccc;
}
.parent{
text-align:center;
}
HTML
<div class="parent">
<a class="button">Test</a>
<a class="button">Test</a>
</div>
Check this http://jsfiddle.net/2ws9r/11/
add a container with fixed width and margin 0 auto;
http://jsfiddle.net/2ws9r/13/
hope it helps
JSFiddle
<div>
<a class="button">Test</a>
<a class="button">Test</a>
</div>
div{ text-align: center; }
a.button {
display: inline-block;
padding: 3px 10px 3px 10px;
width:50px;
margin-left:auto;
margin-right:auto;
text-align: center;
color: #636363;
text-decoration: none;
border-top: solid 1px #ccc;
border-left: solid 1px #ccc;
border-bottom: solid 1px #ccc;
border-right: solid 1px #ccc;
}
a.button:hover {
color: #179FD9;
}
I have a drop down menu created purely with CSS. I would like to implement an overflow using z-index (i presume) that will bleed over a border on my menu to give the impression that both the link and the dropdown menu are joined.
The drop down works correctly but I need the first menu item to overflow it's white background on to the drop down menu.
If you go to http://cssdesk.com/ztK64 and hover over the first menu link you will see what I am attempting to explain.
This is my code:
CSS
/*Main nav*/
.main_nav_container{
margin: 10px 0 10px 0;
float:right;
}
ul.main_nav{
margin:0;
z-index:1;
postion:absolute;
}
ul.main_nav li{
margin:0;
display:inline-block;
border-top:solid 1px transparent;
border-left:solid 1px transparent;
border-right:solid 1px transparent;
}
ul.main_nav li a{
font-size:13px;
display:block;
font-weight:bold;
height:25px;
line-height:25px;
padding:0 13px;
text-decoration:none;
color:#1122cc;
border:1px solid transparent;
}
ul.main_nav li a:hover{
text-decoration:underline;
}
ul.main_nav li:hover{
border-top:solid 1px #ccc;
border-left:solid 1px #ccc;
border-right:solid 1px #ccc;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-khtml-border-radius: 4px 4px 0 0;
background: #fff;
}
ul.main_nav li:hover ul{
display:inline;
}
ul.main_nav li ul{
display:none;
z-index:500;
position:absolute;
background: #fff;
margin:0;
padding:0;
border:solid 1px #ccc;
-moz-border-radius: 0 4px 4px 4px;
border-radius: 0 4px 4px 4px;
-webkit-border-radius: 0 4px 4px 4px;
-khtml-border-radius: 0 4px 4px 4px;
}
ul.main_nav li ul li{
display:block;
margin:0;
padding:0;
text-align:left;
}
ul.main_nav li ul li:hover{
text-decoration:underline;
border-top:solid 1px #fff;
border-left:solid 1px #fff;
border-right:solid 1px #fff;
}
ul.main_nav li ul li a{
font-weight:normal;
}
HTML
<div class="main_nav_container">
<ul class="main_nav">
<li>
<a id="hover" href="#">For sale</a>
<ul>
<li>Property for sale</li>
<li>New homes for sale</li>
<li>Find estate agents</li>
</ul>
</li>
<li>To rent</li>
<li>New homes</li>
<li>House prices</li>
<li>Blog</li>
<li>Property advice</li>
<li>Contact</li>
</ul>
</div>
Add the following CSS:
ul.main_nav li:hover a {
border-bottom:1px solid white;
position:relative;
z-index:100;
}
ul.main_nav li:hover ul {
margin-top:-1px;
margin-left:-1px;
z-index:99;
}
You have to have the position:relative; in the a to make the z-index work correctly. The bottom border of the a is to cover up the border of the ul. The margin changes in the ul are to position the borders correctly for the effect of them being connected.