I am making a tooltip box which involve personal introduction text,my target is a tooltip box with Arrow is displayed if I using a mouse to hover a profile picture.........
I have tried some methods online but they are not workable ...... can anyone help me?
here is my css code for the tooltip box
.tooltip {
display:none;
position:absolute;
border:1px solid #333;
background-color:#161616;
border-radius:5px;
padding:10px;
color:#fff;
font-size:12px Arial;
}
Here is my html code example
<table style="width:100%">
<tr>
<td><img src="http://2017.igem.org/wiki/images/2/26/Andrew.PNG" width="200" height="200" class="masterTooltip" title="Name: Ching Yuet To;
Hobby: Hiking, Watching movie;
I believe that it would be fun that we can carry out research study
independently. I think it is meaningful to participate and promote synthetic
biology research.
I can learn a lot and make many international friends in Boston! "></td>
Use ::before selector to make the arrow like the example
.tooltip-element {
display:none;
position:absolute;
border:1px solid #333;
background-color:#161616;
border-radius:5px;
padding:10px;
color:#fff;
font-size:12px Arial;
bottom:100%;
left:0;
}
.tooltip-element::after{
content:'';
position:absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 7px 5px 0 5px;
border-color: #161616 transparent transparent transparent;
bottom:-8px;
left:5px;
}
.tooltip{
position:relative;
}
.tooltip:hover .tooltip-element{
display:block;
}
<br><br><br><br><br><br><br>
<span class="tooltip">
<span class="tooltip-element">contnet tooltip</span>
test</span>
Basic Tooltips Image With Arrow
/* --- Tooltip || Begin --- */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltipText {
visibility: hidden;
max-width: 300px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 5px;
padding: 0.5em;
position: absolute;
z-index: 1;
word-wrap: break-word;
}
.tooltip:hover .tooltipText {
visibility: visible;
}
.tooltipTextRight {
left: 110%;
top: 0px;
}
/* --- Tooltip || End --- */
/* --- Tooltip Arrow || Begin --- */
.tooltip .tooltipArrow::after {
border-width: 5px;
border-style: solid;
content: "";
position: absolute;
}
.tooltipArrowRight::after {
border-color: transparent black transparent transparent; /* right */
top: 0px;
right: 100%;
margin-top: 5px;
}
/* --- Tooltip Arrow || End --- */
img {
width: 200px;
height: 200px;
object-fit: cover;
}
<div class="tooltip">
<img src="http://2017.igem.org/wiki/images/2/26/Andrew.PNG" title="Name: Ching Yuet To;" />
<span class="tooltipText tooltipTextRight tooltipArrow tooltipArrowRight">
<p>Hobby: Hiking, Watching movie;</p>
<p>I believe that it would be fun that we can carry out research study independently. I think it is meaningful to participate and promote synthetic biology research.</p>
</span>
</div>
Related
This question already has answers here:
Double border with different color [duplicate]
(8 answers)
Closed 8 months ago.
I want create this type gallery. I have multiple images in it. So when I hover on it then images should changes automatically.
Now I'm facing one issue i.e. How to add two borders like this using css or any other style-sheet.
You can add some box-shadow together. The first one is gray. The second one is white as a border with a one-pixel movement than the previous.
body{
background:#efefef;
}
.wrapper {
position: relative;
padding:10px;
}
.image {
width: 100px;
height: 100px;
background: #000;
border: 1px solid #FFF;
position: absolute;
box-shadow: 5px -5px 0 gray,6px -6px 0 white,11px -11px 0 lightgray,12px -12px 0 white;
}
<div class="wrapper">
<div class="image"></div>
</div>
It can be done with three elements. One element is the image itself, and it has a tiny 1px white border. Then there are two elements behind the image that have grey background and also white border.
Look at this example, pretty much the same, just change the div with class image for an actual img element and invert the positioning and you are ready to go.
.wrapper {
position: relative;
}
div {
width: 100px;
height: 100px;
background: #000;
border: 1px solid #FFF;
position: absolute;
}
.first {
left: 5px;
top: 5px;
z-index: -1;
background-color: #777;
}
.second {
left: 10px;
top: 10px;
z-index: -2;
background-color: #AAA;
}
<div class="wrapper">
<div class="first"></div>
<div class="second"></div>
<div class="image"></div>
</div>
try this
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color:black;
}
.imageContainer{
display:inline-block;
position:relative;
width:100px;
height:100px;
top:200px;
left:200px;
padding:50px;
background: url("https://media.cntraveller.com/photos/611bf0b8f6bd8f17556db5e4/1:1/w_2000,h_2000,c_limit/gettyimages-1146431497.jpg") no-repeat center center/cover;
}
.divOne{
position:absolute;
border-top:3px solid grey;
border-right:3px solid grey;
width:100%;
height:100%;
top:-6px;
left:6px;
z-index:-1;
}
.divTwo{
position:absolute;
border-top:3px solid grey;
border-right:3px solid grey;
width:100%;
height:100%;
top:-10px;
left:10px;
z-index:-1;
}
</style>
</head>
<body>
<div class="imageContainer">
<div class="divOne"></div>
<div class="divTwo"></div>
</div>
</body>
</html>
this is my html and my script as well. i know this is all really messy code so i apologize for that as i'm still learning. I would really appreciate some help with this issue. Thanks in advance
<html>
<head>
<link rel="stylesheet" type="text/css" href="home.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#home" ).hover(
function(){
$(this).addClass("active");
},
function(){
$(this).removeClass("active");
}
);
$("#circle" ).hover(
function(){
$(this).addClass("active");
},
function(){
$(this).removeClass("active");
}
);
});
</script>
</head>
<body>
<p class="header"></p>
<p id="yellow"></p>
<p id="circle"></p>
<p id="body"></p>
<p id="body2"></p>
<p id ="logo"></p>
<p id="wood"></p>
<p id ="body3"></p>
<p id ="getintouch"></p>
<div >
<p id ="home">HOME</p>
<p id ="about">ABOUT</p>
<p id="contact">CONTACT</p>
</div>
<p id="circle1" class="circle"></p>
<p id="circle2" class="circle"></p>
<p id="circle3" class="circle"></p>
</body>
</html>
and this is my css
* { margin: 0; padding: 0; }
#font-face { font-family: Basic; src: url('fonts/basictitlefont.ttf'); }
.header{
position:realtive;
display: block;
width:100%;
min-height: 100px;
padding:0px;
margin:0px;
margin-top: 0px;
background-image: url(images/creamconcrete.png);
}
#yellow{
position:realtive;
display: block;
width:100%;
min-height: 15px;
background-color: ffa407;
padding:0px;
margin:0px;
z-index: 11;
}
#circle{
background-image: url(images/Counter.png);
background-size: 100%;
width: 100%;
min-height: 500px;
display: block;
position: relative;
margin:0px;
top:0px;
}
#body{
position:realtive;
display: block;
width:100%;
min-height: 500px;
background-color: white;
padding:0px;
margin:0px;
}
#body2{
position:realtive;
display: block;
width:100%;
min-height: 500px;
background-color: 494949;
padding:0px;
margin:0px;
}
#body3{
position:realtive;
display: block;
width:100%;
min-height: 200px;
background-color: white;
padding:0px;
margin:0px;
}
#logo{
width:100px;
height:100px;
top:60px;
left:90%;
border-radius: 50%;
background-color:6d6c6c;
position:absolute;
}
#wood{
background-image: url(images/woodshop.png);
background-size: 100%;
width: 100%;
min-height: 500px;
display: block;
position: relative;
margin:0px;
top:0px;
}
#getintouch{
width:500px;
height:200px;
top: 1760px;
position: absolute;
left: 50%;
transform: translatex(-50%);
border:solid 8px #6d6c6c;
}
#home{
font-family: Basic;
font-size: 30px;
font-weight: bold;
color:#6d6c6c;
position: absolute;
top:40px;
left:10px;
}
#about{
font-family: Basic;
font-size: 30px;
font-weight: bold;
color:#ffa407;
position: absolute;
top:40px;
left:200px;
}
#contact{
font-family: Basic;
font-size: 30px;
font-weight: bold;
color:#ffa407;
position: absolute;
top:40px;
left:400px;
}
#logo{
width:100px;
height:100px;
top:60px;
left:90%;
border-radius: 50%;
background-color:6d6c6c;
position:absolute;
}
#circle1{
width:250px;
height:250px;
opacity:0.7;
top:225px;
left: 50%;
transform: translatex(-50%);
border-radius: 50%;
background-color:ded7c9;
position:absolute;
}
#circle2{
width:250px;
height:250px;
opacity:0.7;
top:225px;
left:70%;
border-radius: 50%;
background-color:ded7c9;
position:absolute;
}
#circle3{
opacity:0.7;
width:250px;
height:250px;
top:225px;
left:10%;
border-radius: 50%;
background-color:ded7c9;
position:absolute;
}
.highlighted {
background-color:#556677;
}
.active{
background-color: red;
}
This is probably a simple issue, but why does my script only run in the section for the id of home and not in the id of circle. I'm applying the same code and class to both but when i hover over my circle it doesn't change. whyyyyy
Are you talking about #circle specifically, or the other circle elements? If you're expecting this to work on #circle1, 2, and 3, it won't. You've added a class to those circle elements, so you'll need use a class selector instead.
$(".circle" ).hover( ... );
You'll also need to be aware of CSS specificity. Your .active selector will need to be at least as specific, if not more specific, in order for it to take effect. For example:
.active, #circle1.active, #circle2.active, #circle3.active {
background-color: red;
}
This is a pretty poor solution, which is why many people recommend avoiding the use of IDs and just using classes. If you switch those IDs to classes, you won't have to modify your .active selector. For example:
<p class="circle circle1"></p>
<p class="circle circle2"></p>
<p class="circle circle3"></p>
Then the CSS:
.circle1 { background-color: #ded7c9; }
.circle2 { background-color: #ded7c9; }
.circle3 { background-color: #ded7c9; }
.active { background-color: red; }
You can read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Also, if you aren't performing any logic on hover, then you don't need javascript. Just use the :hover pseudoclass in your CSS.
your active class Should Be like This
.active{
background-color: red !important;
}
The Background color of #circle is already applied to the Circle object
so Giving An !important declaration provides a way for a stylesheet author to give a CSS value more weight than it naturally has.
The issue seems to be that you are not overwriting the background image. So you simply can't see the background color if the background graphic doesn't have any transparent parts,
.active{
background-color: red !important;
background-image: none !important;
}
I have an input text box, on which I would like to display some text area when the user's mouse get over it, giving to him informations on the text to enter.
here is my HTML code :
<html>
<body>
<style type="text/css">
.mouseover
{
}
</style>
<span onmouseover="this.classname='mouseover'" onmouseout="this.classename=''"></span>
<input id="mybox" type="text" />
</body>
</html>
What is the best CSS trick that would help to do that ?
Thank you for help in advance.
You can do all of this with CSS. Play around with CSS triangles for the tooltip but what you're mainly looking for is to use the :hover pseudo-class. No need for Javascript.
.input {
position: relative;
}
.tooltip {
display: none;
padding: 10px;
}
.input:hover .tooltip {
background: blue;
border-radius: 3px;
bottom: -60px;
color: white;
display: inline;
height: 30px;
left: 0;
line-height: 30px;
position: absolute;
}
.input:hover .tooltip:before {
display: block;
content: "";
position: absolute;
top: -5px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid blue;
}
http://jsfiddle.net/v8xUL/1/
You can use Jquery Tooltip:
Jquery Tooltip
Just one more way to do that...
Filldle Demo
For me in IE8 OK DEMO
<input type="text">
<span>Some Text inside... </span>
span {
background-color: rgba(0,102,255,.15);
border: 2px solid rgba(0,102,255,.5);
border-radius: 10px;
color: #000;
display: none;
padding: 10px;
position: relative;
}
span:before {
content: "";
border-style: solid;
border-width: 0 15px 15px 15px;
border-color: transparent transparent rgba(0,102,255,.5) transparent;
height: 0;
position: absolute;
top: -17px;
width: 0;
}
input {
display: block
}
input:hover + span {
display: inline-block;
margin: 10px 0 0 10px
}
* simple css-based tooltip */
.tooltip {
background-color:#000;
border:1px solid #fff;
padding:10px 15px;
width:200px;
display:none;
color:#fff;
text-align:left;
font-size:12px;
/* outline radius for mozilla/firefox only */
-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
}
// select all desired input fields and attach tooltips to them
$("#myform :input").tooltip({
// place tooltip on the right edge
position: "center right",
// a little tweaking of the position
offset: [-2, 10],
// use the built-in fadeIn/fadeOut effect
effect: "fade",
// custom opacity setting
opacity: 0.7
});
got to this link http://jquerytools.org/demos/tooltip/form.html
Try this property it's asp but may work for your case
ErrorMessage="Your Message";
How can I make a pointy arrow in CSS? Not just a triangle but one with a stem, like a traditional arrow that would be fired from a bow?
I'm trying to do it by creating a div container, containing two containers, left and right. The right will contain the triangle, and the left will contain three divs, the centre of which will be colored to create the stem.
Here's my code:
HTML:
<div id="main">
<div class='arrowblock'>
<div class='arrowright'></div>
<div class='rectcontainer'>
<div class='rect'></div>
<div class='rect' style='background-color:green'>
</div><div class='rect'>
</div>
</div>
CSS:
.rectcontainer {
height:30px;
width:100px;
}
.arrowblock {
width:130px;
border-top: 15px solid transparent;
}
.arrowright {
float:right;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 30px solid green;
}
.rect {
width:100px;
height:10px;
background-color:transparent;
}
Is there a simpler way to achieve this?
Here is an arrow with pure CSS. Supported by all browsers. It took me less than a minute to make..
jsFiddle
.arrow {
width: 120px;
}
.line {
margin-top: 14px;
width: 90px;
background: blue;
height: 10px;
float: left;
}
.point {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 30px solid blue;
float: right;
}
<div class="arrow">
<div class="line"></div>
<div class="point"></div>
</div>
How about just using a html entity or unicode symbol for your arrow:
<div>→</div>
<div title="U+21A3: RIGHTWARDS ARROW WITH TAIL">↣</div>
div{
font-size: 40px;
}
FIDDLE
There are more to choose from here
To build on #josh-crozier's answer, you can eliminate a lot of the HTML by using pseudo-elements instead:
jsFiddle
HTML:
<div class="arrow"></div>
CSS:
.arrow {
position:relative;
width:120px;
margin:50px auto;
height:0;
border-bottom:10px solid blue;
}
.arrow::after {
content: '';
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 30px solid blue;
position: absolute;
right: -10px;
top: -15px;
}
To add an arrow at the start of the line using the ::before element is trivial also: jsFiddle
I've created this, which you can use for an arrow that points to the right.
In the script are two variables, widthofarrow and colorofarrow. By changing these you can create an arrow of any size or color.
http://jsfiddle.net/FKekh/3/
HTML:
<!DOCTYPE html>
<div id="main"></div>
CSS:
.rectcontainer {
height:30px;
}
.arrowblock {
}
.arrowright {
float:right;
}
.rect {
width:100px;
height:10px;
background-color:transparent;
}
JAVASCRIPT:
widthofarrow=130;
colorofarrow="#345678";
$("#main").append("<div class='arrowblock'><div class='arrowright'></div><div class='rectcontainer'><div class='rect'></div><div class='rect' style='background-color:" + colorofarrow + "'></div><div class='rect'></div></div></div>");
$('.arrowblock').css('width', widthofarrow + 'px');
$('.rectcontainer').css('width', (widthofarrow - (30)) + 'px');
$('.arrowright').css('border-top', (15) + 'px solid transparent');
$('.arrowright').css('border-bottom', (15) + 'px solid transparent');
$('.arrowright').css('border-left', (widthofarrow/4.333333333333333) + 'px solid ' + colorofarrow);
EDIT
I've updated JoshC's great code so it can be used to create arrows of different sizes and colors.
http://jsfiddle.net/fqcFp/2/
Taking Josh's answer a bit further I have made an example that adjusts width based on the container keeping it pure CSS. Thanks #Josh for the starting point! I support some older browsers so this is good for me. We could use transform to rotate the arrow as we like it in more modern browsers. HTH
<div class="RightArrow">
<div class="line"></div>
<div class="point"></div>
</div>
<!-- for very short arrows reduce the width of .line -->
<style> /* style tag added so SO will syntax color please use *.css irl*/
.RightArrow {
width:90%;
position: relative;
}
.line {
margin-top:8px;
width:97%;
background:blue;
height:0.3em;
float:left;
position: absolute;
}
.point {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 37px solid blue;
float:right;
}
</style>
I have a pop up div working on click. I need to have the pop up appear in the browser where the user is looking. Right now on short pages the pop up div is no where to be found and on long pages you have to scroll way down to even see the pop up.
So far I have tried a couple different things in my popUpDiv with no luck.
margin: 30px auto 0;
top: 50%;
left: 50%;
margin-left: -155px;
margin-top: -700px;
Here is my css:
/*STYLES FOR CSS POPUP*/
#blanket {
background-color:#111;
opacity: 0.65;
*background:none;
position:absolute;
z-index: 9001;
top:0px;
left:0px;
width:100%;
}
#popUpDiv {
padding: 40px;
position:absolute;
background-color: #f3f3f3;
height:255px;
border:5px solid #000;
z-index: 9002;
-moz-border-radius: 10px;
-webkit-border-radius:10px;
border-radius: 10px;
margin-left: -155px;
margin-top: -700px;
}
#popUpDiv a {position:relative; top:0px; right:10px}
/*END CSS POPUP*/
Here is what I have in my php file:
<!--POPUP-->
<script type="text/javascript" src="http://domain.com/js/css-pop.js"></script>
<div id="blanket" style="display:none;">
</div>
<div id="popUpDiv" style="display:none;">
Pop Up content Here
</div>
<!-- / POPUP-->
There's more than a few ways to do what you're trying to do in jscript, but the cadillac way to do it might be modal popups: http://www.script-tutorials.com/css3-modal-popups/ .
Position: fixed will solve your problem. Your use of position: absolute is causing all the drama.
#popUpDiv {
padding: 40px;
position:fixed;
background-color: #f3f3f3;
height:255px;
border:5px solid #000;
z-index: 9002;
-moz-border-radius: 10px;
-webkit-border-radius:10px;
border-radius: 10px;
}