I have tried the CSS only tooltip. However, I am not able to add a border to the tooltip's arrow.
Here is my code (see http://jsfiddle.net/1u2kw86m/):
Test small Text
.tooltip {
display: inline;
position: relative;
}
.tooltip:hover {
color: #000;
text-decoration: none;
}
.tooltip:after {
background: #ffffe1;
border-radius: 4px;
border:1px solid #DCA;
box-shadow: 5px 5px 8px #ccc;
bottom: 28px;
color: #000;
content: attr(title);
display: block;
left: 1em;
padding:9px 8px 9px 8px;
position: absolute;
z-index: 98;
min-width:200px;
max-width:500px;
font: 12px Arial, Helvetica, sans-serif;
line-height:16px;
}
.tooltip:before {
border: solid;
border-color: rgba(255,255,225,1) transparent;
border-width: 15px 15px 0px 0px;
bottom: 1em;
content: "";
display: block;
left: 2em;
position: absolute;
z-index: 99;
}
You'll want to show the :before and :after only when the elment is hovered.
So
.tooltip:after
becomes
.tooltip:hover:after
.tooltip {
display: inline;
position: relative;
}
.tooltip:hover {
color: #000;
text-decoration: none;
}
.tooltip:hover:after {
background: #ffffe1;
border-radius: 4px;
border: 1px solid #DCA;
box-shadow: 5px 5px 8px #ccc;
bottom: 28px;
color: #000;
content: attr(title);
display: block;
left: 1em;
padding: 9px 8px 9px 8px;
position: absolute;
z-index: 98;
min-width: 200px;
max-width: 500px;
font: 12px Arial, Helvetica, sans-serif;
line-height: 16px;
}
.tooltip:hover:before {
border: solid;
border-color: rgba(255, 255, 225, 1) transparent;
border-width: 15px 15px 0px 0px;
bottom: 1em;
content: "";
display: block;
left: 2em;
position: absolute;
z-index: 99;
}
<p>Tool tip</p>
<br/>
<br/>
</br>Test small Text
<br/>
<br/>
http://jsfiddle.net/1u2kw86m/1/
add a span for tooltip so that you can style it better
.tooltip {
display: inline;
position: relative;
}
.tooltip:hover {
color: #000;
text-decoration: none;
}
.tooltip span {
background: #ffffe1;
border-radius: 4px;
border: 1px solid #DCA;
box-shadow: 5px 5px 8px #ccc;
bottom: 28px;
color: #000;
content: attr(title);
display: block;
left: 1em;
padding: 9px 8px 9px 8px;
position: absolute;
z-index: 98;
min-width: 200px;
max-width: 500px;
font: 12px Arial, Helvetica, sans-serif;
line-height: 16px;
display: none;
}
.tooltip span:before {
border: solid;
border-color: rgba(255, 255, 225, 1) transparent;
border-width: 14px 14px 0px 0px;
bottom: -14px;
content: "";
display: block;
left: 2em;
position: absolute;
z-index: 1;
}
.tooltip span:after {
border: solid;
border-color: #DCA transparent;
border-width: 17px 17px 0px 0px;
content: "";
display: block;
left: 23px;
bottom: -17px;
position: absolute;
z-index: -1;
}
.tooltip:hover span {
display: block;
}
hover on a for the tooltip to appear
<br>
<br>
<br>
<br> Test small Text<span>Automatic resize CSS</span>
Related
I'm trying to add the triangle pointer directly in the middle of the anchor element. I tried using the transform property but its not working for the x coordinate:
.navigation-bar > a {
float:right;
display: inline-block;
vertical-align: top;
margin-right: 15px;
height: 60px;
color: white;
line-height: 70px;
font-weight: bolder;
font-size: 12px;
text-decoration: none;
font-family: sans-serif;
position: relative;
padding: 3px;
}
.navigation-bar > a:hover:before {
content: "";
position: absolute;
transform: translateX(350px);
transform: translateY(40px);
width: 0px;
height: 7px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #fff;
}
You can do this like that way....
.navigation-bar>a {
display: inline-block;
vertical-align: top;
margin-right: 15px;
height: 60px;
color: #000;
line-height: 70px;
font-weight: bolder;
font-size: 12px;
text-decoration: none;
font-family: sans-serif;
position: relative;
padding: 3px;
background: red;
}
.navigation-bar>a:before {
content: "";
position: absolute;
transform: translateY(-10px);
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid red;
}
<div class="navigation-bar">
html
</div>
I am trying to create a speech bubble with an arrow on the left and right side. Something like below
I have used the below CSS to achieve the same :
.speech-wrapper{
padding: 30px 40px;
}
.chatbox {
padding: 5px;
margin-left: 5px;
margin-right: 5px;
margin-top:3px;
background: #c7edfc;
color: #000;
position: relative;
border-radius: 4px;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}
.chatbox_other{
padding: 5px;
margin-left: 5px;
margin-right: 5px;
margin-top:3px;
background: #D3D3D3;
color: #000;
position: relative;
border-radius: 4px;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}
.name_other{
font-weight: 600;
position: absolute;
font-size: 12px;
margin: 0 0 4px;
color: #3498db;
bottom: 8px;
right: 10px;
}
.timestamp_other{
font-size: 11px;
position: absolute;
text-align: left;
bottom: 0px;
left: 10px;
text-transform: uppercase; color: #999
}
.timestamp{
font-size: 11px;
position: absolute;
bottom: 8px;
right: 10px;
text-transform: uppercase; color: #999
}
/* speech bubble 13 */
.name{
font-weight: 600;
font-size: 12px;
margin: 0 0 4px;
color: #3498db;
}
.bubble-arrow {
position: absolute;
width: 0;
bottom:42px;
left: -16px;
height: 0;
&.alt{
right: -2px;
bottom: 40px;
left: auto;
}
}
.bubble-arrow:after {
content: "";
position: absolute;
border: 0 solid transparent;
border-top: 9px solid #c7edfc;
border-radius: 0 20px 0;
width: 15px;
height: 30px;
transform: rotate(145deg);
}
.bubble-arrow.alt:after {
transform: rotate(45deg) scaleY(-1);
}
But for me, the arrow is missing always it always comes with a box.
I am a beginner to HTML and CSS any help on this will be appreciated.
Am I doing anything wrong to draw the rectangle?
EDIT:
I can see the chat bubble on chrome and all recent browsers but when I try using the very old browsers the below statement does not decode correctly. So the chat triangle was not in the appropriate position.
transform: rotate(145deg);
}
.bubble-arrow.alt:after {
transform: rotate(45deg) scaleY(-1);
}
HTML CODE:
<div class="speech-wrapper"><div class="chatbox"><div class="txt"><p class="name">TestUser1</p>Hi<span class="timestamp">10:20 pm</span></div><div class="bubble-arrow alt"></div></div>
Is there anything else can I use apart from the transform
Try this,
<!doctype html>
<html>
<head>
<title>Chat Bubbles Demo</title>
<style type="text/css">
.chat-box
{
width: 300px;
}
.header
{
padding: 10px;
color: white;
font-size: 14px;
font-weight: bold;
background-color: #6d84b4;
}
.messages
{
padding: 10px;
height: 200px;
background-color: green;
background-color: rgb(237, 239, 244);
border-width: 1px;
border-color: black;
border-style: solid;
overflow-y: scroll;
}
.messages ul
{
padding: 0px;
list-style-type: none;
}
.messages ul li
{
height: auto;
margin-bottom: 10px;
clear: both;
padding-left: 10px;
padding-right: 10px;
}
.messages ul li span
{
display: inline-block;
max-width: 200px;
background-color: white;
padding: 5px;
border-radius: 4px;
position: relative;
border-width: 1px;
border-style: solid;
border-color: grey;
}
.messages ul li span.left
{
float: left;
}
.messages ul li span.left:after
{
content: "";
display: inline-block;
position: absolute;
left: -8.5px;
top: 7px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid white;
}
.messages ul li span.left:before
{
content: "";
display: inline-block;
position: absolute;
left: -9px;
top: 7px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid black;
}
.messages ul li span.right:after
{
content: "";
display: inline-block;
position: absolute;
right: -8px;
top: 6px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #dbedfe;
}
.messages ul li span.right:before
{
content: "";
display: inline-block;
position: absolute;
right: -9px;
top: 6px;
height: 0px;
width: 0px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid black;
}
.messages ul li span.right
{
float: right;
background-color: #dbedfe;
}
.clear
{
clear: both;
}
.input-box
{
background-color: white;
height: 50px;
padding: 0px;
}
.input-box textarea
{
padding: 0px;
width: 278px;
height: 100%;
display: inline-block;
outline: 0px;
border-width: 0px;
resize: none;
border-width: 1px;
border-color: black;
border-style: solid;
font-size: 12px;
padding: 10px;
border-top-width: 0px;
}
</style>
</head>
<body>
<div class="chat-box">
<div class="header">
Narayan Prusty
</div>
<div id="messages" class="messages">
<ul>
<li>
<span class="left">Hello</span>
<div class="clear"></div>
</li>
<li>
<span class="left">Are you there?</span>
<div class="clear"></div>
</li>
<li>
<span class="right">Yes I am here</span>
<div class="clear"></div>
</li>
<li>
<span class="left">Thanks for accepting my friend request</span>
<div class="clear"></div>
</li>
<li>
<span class="right">You Welcome</span>
<div class="clear"></div>
</li>
<li>
<span class="left">Bye</span>
<div class="clear"></div>
</li>
</ul>
<div class="clear"></div>
</div>
<div class="input-box">
<textarea placeholder="Enter message"></textarea>
</div>
</div>
</body>
</html>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I want convert a psd file to html and css and I want to convert it into html and css . But I cant do that
This is how I would do it. Add some #media queries to make it responsive.
.breadcrumbs {
position: relative;
display: inline-block;
vertical-align: middle;
border: 1px solid #ccc;
overflow: hidden;
}
.breadcrumb {
padding: 9px 12px 9px 24px;
position: relative;
float: left;
background-color: #f1f1f1;
display: inline-block;
margin-bottom: 0;
text-align: center;
border: 1px solid transparent;
color: #333;
text-transform: uppercase;
font: 12px sans-serif;
text-decoration: none;
font-weight: 700;
}
.breadcrumb:first-child {
padding: 9px 12px 9px 18px !important;
}
.breadcrumbs .breadcrumb:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 10px solid #ccc;
position: absolute;
top: 50%;
margin-top: -20px;
margin-left: 1px;
left: 101%;
z-index: 3;
}
.breadcrumbs .breadcrumb:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 10px solid #f1f1f1;
position: absolute;
top: 50%;
margin-top: -20px;
left: 101%;
z-index: 3;
}
.breadcrumb.active,
.breadcrumb:hover {
padding: 9px 12px 9px 24px;
position: relative;
float: left;
background-color: #3f51b5;
display: inline-block;
margin-bottom: 0;
text-align: center;
border: 1px solid transparent;
color: #fff;
text-transform: uppercase;
font: 12px sans-serif;
text-decoration: none;
font-weight: 700;
}
.breadcrumbs .breadcrumb .active:before,
.breadcrumbs .breadcrumb:hover:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 10px solid #3f51b5;
position: absolute;
top: 50%;
margin-top: -20px;
margin-left: 1px;
left: 100%;
z-index: 4;
}
.breadcrumbs .breadcrumb.active:after,
.breadcrumbs .breadcrumb:hover:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 10px solid #3f51b5;
position: absolute;
top: 50%;
margin-top: -20px;
left: 100%;
z-index: 4;
}
<div class="breadcrumbs">
Search
Meet
Discuss
Manage
</div>
Here is the Code
.breadcrumb li{
display:inline-block;
padding:10px 15px;
position: relative;
border: 1px solid #ccc;
margin-left:-4px;
background: #eee;
}
.breadcrumb li:first-child{
background: #054EA3;
}
.breadcrumb li a{
padding-left: 15px;
color:#888;
text-decoration:none;
}
.breadcrumb li:first-child a{
color:#fff;
}
.breadcrumb li:after, .breadcrumb li:before {
left: 100%;
top: 50%;
border: 2px solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.breadcrumb li:after {
border-color: rgba(136, 183, 213, 0);
border-left-color: #eee;
border-width: 20px;
margin-top: -20px;
z-index:99999;
}
.breadcrumb li:first-child:after {
border-left-color: #054EA3;
}
.breadcrumb li:before {
border-color: rgba(194, 225, 245, 0);
border-left-color: #ccc;
border-width: 21px;
margin-top: -21px;
z-index:99999;
}
<ul class="breadcrumb">
<li>SEARCH</li>
<li>MEET</li>
<li>DISCUSS</li>
<li>MANAGE</li>
</ul>
This question already has answers here:
How do I center an anchor element in CSS?
(14 answers)
Closed 5 years ago.
For some reason, this <a> tag won't align to the horizontal center. What needs to be done in order to fix this?
.button {
display: inline-block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
text-align: center;
text-indent: 15px;
}
.button:before, .button:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* box shape */
.button:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
demo
Wrap it in a DIV tag that has text-align: center;:
.button {
display: inline-block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
text-align: center;
text-indent: 15px;
}
.button:before,
.button:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* box shape */
.button:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
.x {
text-align: center;
}
<div class="x">demo</div>
Used margin: 0 auto; for centering and changed a tag to display: block; Also added a width to it.
.button {
display: inline-block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
text-align: center;
text-indent: 15px;
width: 50px;
display: block;
margin: 0 auto;
}
.button:before,
.button:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* box shape */
.button:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
demo
You have to make a tag a block element.So rather than inline-block use display:block.And to center use margin:0 auto;
.button {
display: block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
text-align: center;
text-indent: 15px;
}
.myButton {
width: 150px;
margin: 10px auto;
}
.button:before,
.button:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* box shape */
.button:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
demo
demo
The "a"-Element is contained in another Element. In the case of your example it is in the Body-Element. This Element need to have its elements centered, so you would need to set a rule like this:
body {
text-align: center;
}
.button {
display: inline-block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
text-indent: 15px;
}
.button:before,
.button:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
text-align: center;
}
/* box shape */
.button:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
body {
text-align: center;
}
demo
.button {
display: inline-block;
position: absolute;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
text-align: center;
text-indent: 15px;
left: calc(50% - 88px);
}
.button:before, .button:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* box shape */
.button:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
demo
Just change yours .button class CSS to this one:
.button {
display: inline-block;
position: absolute;
width: 20px;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none!important;
text-align: center;
text-indent: 15px;
left: 0;
right: 0;
margin: 0 auto;
}
It will surely work. Thanks.
Use transform to do the trick.
.button {
left: 50%;
transform: translateX(-50%);
}
.button {
left: 50%;
transform: translateX(-50%);
display: inline-block;
position: relative;
padding: 10px 60px;
background-color: transparent;
border: 3px solid black;
color: black;
text-decoration: none !important;
text-align: center;
text-indent: 15px;
}
.button:before, .button:after {
content: ' ';
display: block;
position: absolute;
left: 10px;
top: 52%;
}
/* box shape */
.button:before {
width: 20px;
height: 4px;
border-style: solid;
border-width: 0 4px 4px;
}
demo
I have the following drop down:
CSS:
.third-menu{
position: relative;
top: -50px!important;
}
.dropdown-submenu {
border-bottom: 1px solid #ccc;
}
#mn-wrapper {
display: block;
width: 100%;
position: absolute;
height: 30px;
}
.mn-sidebar {
margin-left: 40px;
display: block;
position: relative;
vertical-align: middle;
padding-bottom: 1px;
background: #333333;
width: 250px;
z-index: 2;
}
#mn-cont {
display: block;
vertical-align: top;
position: relative;
padding: 10;
}
.container {
margin-right: auto;
}
.cnt-mcont {
background-color: #F6F6F6;
color: inherit;
font-size: 13px;
font-weight: 200;
line-height: 21px;
padding: 15px 30px 30px 30px;
margin-top: 0;
height: 101vh;
}
.mn-sidebar .mn-toggle {
display: none;
padding: 10px 0;
text-align: center;
cursor: pointer;
}
.mn-vnavigation {
margin: 0 0 0 0;
padding: 0;
border-top: 2px solid #CCFFFF;
border-bottom: 1px solid #CCFFFF;
border-left: 5px solid #CCFFFF;
border-right: 5px solid #CCFFFF;
}
.mn-vnavigation li a {
border-top: 2px solid #CCFFFF;
border-bottom: 1px solid #CCFFFF;
display: block;
padding: 14px 18px 13px 15px;
color: #fff;
text-decoration: none;
font-size: 12px;
font-weight: 300;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
white-space: nowrap;
}
.dropdown-submenu >
.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
/*height: 590px; */
width: 300px;
background: #333333;
}
.dropdown-submenu:hover >
.dropdown-menu {
display: list-item;
}
.dropdown-submenu > a:after {
display: list-item;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
ul {
list-style: none;
}
ul.dropdown-menu.parent {
margin-top: -1px;
}
Javascript in the fiddle.
Here's the jsfiddle:
http://codepen.io/anon/pen/LpxVdv
Now, when I hover over the items, say on Central Compliance, then the remaining items below it (Control Room, Wealth Applications etc.) disappear. And if I over over Control Room, then Orchestria comes in the white space.
How can this be fixed??
add this to your css:
.third-menu{
position: absolute;
right:0;
top:0;
}
.dropdown-submenu {
border-bottom: 1px solid #ccc;
position:relative;
}
It doesn't disapeare, the active item expands to have enought height to contain menu from next level. Try using position:absolute for next level container.