I am working on a react app where on long texts when I hover my cursor,it shows a popup like this,but somehow its transparent and the table lines are also visible here.
As you can see,In between the lines I can see the white lines which are actually table borders.
How can i fix it?
Here's my code:
<Table.Cell data-title={message.message}>
{this.truncate(message.message, 50)}
</Table.Cell>
This is the table row inside the component.
Now here's the css:
[data-title] {
font-size: 14px;
position: relative;
cursor: help;
}
[data-title]:hover::before {
content: attr(data-title);
opacity: 1;
position: absolute;
margin-top:33px;
padding: 10px;
background: #000;
color: #fff;
font-size: 14px;
width:300px;
white-space: wrap;
}
[data-title]:hover::after {
content: '';
position: absolute;
opacity: 1;
bottom: -12px;
left: 8px;
border: 8px solid transparent;
border-bottom: 8px solid #000;
}
Any help will be appreciated.
you can give z-index to [data-title]:hover::before
for example:
[data-title]:hover::before {
content: attr(data-title);
opacity: 1;
position: absolute;
margin-top:33px;
padding: 10px;
background: #000;
color: #fff;
font-size: 14px;
width:300px;
white-space: wrap;
z-index: 9;
}
Related
I need to implement a dynamic tooltip which automatically moves itself when out of screen, as well as its arrow, depending on the position of the label. However, I am finding difficulty to do this since the tooltip's width changes depending on its content. Any help will be greatly appreciated. Thanks!
Scenario 1:
Scenario 2:
HTML:
<th *ngFor="let field of columnFields">
<a class="column-label">
<div class="custom-tooltip">
<div class="tooltip__initiator">{{field.name}}</div>
<div class="tooltip__item"[innerHTML]="getTooltipText(field.name)"></div>
</div>
</a>
</th>
STYLE:
.custom-tooltip {
position: relative;
}
.tooltip__initiator {
cursor: pointer;
z-index: 5;
}
.tooltip__item {
font-family: "ABeeZee";
font-size: 13px;
line-height: 18px;
position: absolute;
position: absolute;
min-width: 132px;
max-width: 320px;
text-align: center;
padding: 12px;
visibility: hidden;
opacity: 0;
color: white;
border: 1px solid #cecece;
border-radius: 3px;
font-weight: 500;
z-index: 6;
background: blue;
border: 1px solid blue;
border-radius: 8px;
white-space: break-spaces;
inline-size: max-content;
top: calc(70% + 1em);
}
.tooltip__item:after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border-style: solid;
}
.custom-tooltip .tooltip__initiator:hover ~ .tooltip__item {
left: 50%;
visibility: visible;
opacity: 1;
}
.custom-tooltip .tooltip__item:after {
left: 50%;
top: -0.5em;
border-width: 0 1em 0.6em 1em;
border-color: transparent transparent blue transparent;
border-radius: 8px;
}
basically, I'm having issues displaying a tooltip inside a <td> element that has the overflow hidden property. The tooltip text class will pop up on hover, but it's cut off due to overflow hidden. The parent (div) must have the relative position and the child (tooltip) must have the absolute position, this is because it needs to be dynamic as every td needs to have it's own tooltip (popping up next to it). Fyi, the text is populated via a json string).
I've seen a lot of examples online, but I don't think they include a <td> solution with overflow hidden and tooltip.
Any help will be great, thanks.
I have this html/css structure:
.advice-given-class {
position: relative;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.advice-given-class .tooltiptext {
z-index: 10;
display: none;
padding: 14px 20px;
bottom: 20px;
left: 0;
width: 240px;
line-height: 16px;
position: absolute;
}
.advice-given-class:hover .tooltiptext {
display: inline;
color: #ffffff;
border: 1px solid #DCA;
background: #444;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
}
.tooltiptext:after {
position: absolute;
display: block;
content: "";
border-style: solid;
border-width: 8px;
height: 0;
width: 0;
border-color: #444 transparent transparent transparent;
bottom: -16px;
left: 14px;
}
<td>
<div class="advice-given-class">
texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext
<span class="tooltiptext">
text from json string
</span>
</div>
</td>
you can use
position: fixed; to break overflow rule
margin-top : negative height of element to up the tooltip above element
#bigarea {
height: 120px;
}
table {
border: solid 1px black;
}
.advice-given-class {
position: relative;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.advice-given-class .tooltiptext {
z-index: 10;
display: none;
padding: 14px 20px;
width: 240px;
line-height: 16px;
position: fixed;
margin-top: -50px;
left: 15px;
}
.advice-given-class:hover .tooltiptext {
display: inline;
color: #ffffff;
border: 1px solid #DCA;
background: #444;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
}
.tooltiptext:after {
position: absolute;
display: block;
content: "";
border-style: solid;
border-width: 8px;
height: 0;
width: 0;
border-color: #444 transparent transparent transparent;
bottom: -16px;
left: 14px;
}
<div id="bigarea"></div>
<table>
<td>
<div class="advice-given-class">
texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext
<span class="tooltiptext">
text from json string
</span>
</div>
</td>
</table>
Need help in making 2 bordered heading, one should according to content provided in HTML and second should be 100%, image is provided for reference.
I have tried it here
h3 {
position: relative;
font-size: 24px;
font-weight: 700;
color: #000;
text-transform: uppercase;
padding: 0 0 12px;
border-bottom: 3px solid #e64e52;
}
h3:before {
content: '';
position: absolute;
bottom: 0px;
width: 100%;
left: 0px;
border-bottom: 1px solid #000;
display: inline-block;
}
h3.display_inline {
display: inline-block;
}
<h3>HOT DEALS</h3>
<h3 class="display_inline">HOT DEALS</h3>
Problem what I am facing is both are running parallel, if I made it display: inline-block, then it will remain according to content and if display: block, then both will be 100%.
I am also open for JS solution :)
Help in the regards will highly appreciated.
Thanks in Advance.
You can add additional element (e.g. span) inside your h3 element, and style it separately like this:
h3 > span{
border-bottom: 2px solid blue;
display: inline-block;
}
h3{
padding-bottom: 10px;
border-bottom: 2px solid red;
}
<h3 class="display_inline">
<span>HOT DEALS</span>
</h3>
Thanks Champs for the contribution,
I have found my solution, pasting code to help others.
h3 {
position: relative;
font-size:24px;
text-transform: uppercase;
}
h3 > span {
border-bottom: 3px solid #e64e52;
display: inline-block;
position: relative;
z-index: 10;
padding-bottom: 15px;
}
h3:before {
border-bottom: 1px solid #e5e5e3;
position: absolute;
left: 0px;
bottom: 1px;
content: "";
width: 100%;
}
<h3 class="display_inline">
<span>HOT DEALS</span>
</h3>
<h3 class="display_inline">
<span>Inspiration & News</span>
</h3>
Special thanks to #Chris for the solution, I have use his Idea to make it exactly what I needed.
h3 {
position: relative;
font-size: 24px;
font-weight: 700;
color: #000;
text-transform: uppercase;
padding: 0 0 12px;
border-bottom: 3px solid #e64e52;
display: inline-block;
}
span {position:relative;
padding: 0;
width:100%;
display:block;
height: 66px;
}
span:before {
content: '';
position: absolute;
bottom: 0px;
width: 100%;
left: 0px;
border-bottom: 3px solid #ccc;
display:block;
}
<span><h3>HOT DEALS</h3></span>
Currently I have a hamburger menu button: https://jsfiddle.net/sqvwm1dh/
When this button is clicked, I'd like to replace this button with a graphic.
How do I achieve this with my current code. Do I do this in jQuery?
$('header').prepend('<div id="menu-button"></div>');
$('#menu-button').on('click', function(){
var menuItems = $(".menu-primary-menu-container");
menuItems.toggle();
});
header {
background:red;
height:100px;
}
#menu-button {
position: relative;
z-index: 10000;
display: block;
top: 30px;
right:0;
position: fixed;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 15px 0px 22px 20px;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
color: #ffffff;
cursor: pointer;
}
/* line 500, sass/_layout.scss */
#menu-button:after {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
right: 20px;
top: 16px;
}
/* line 511, sass/_layout.scss */
#menu-button:before {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #ffffff;
right: 20px;
top: 26px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<header>
<div class="menu-primary-menu-container">
test
</div>
</header>
$(this).toggleClass('active');
Then in your CSS add a style for your #menu-button with the .active class and set for instance a background image. Or do something else.
I'm using Font-awesome icon for a checkbox, but having problem aligning the icon in the square. It kind of looks ugly and how much I try to work with the padding and alignment, it does not adjust well as the edges are different(the font-awesome icon has round edges which does not fit well with my square). Any one has any ideas of how to fit it perfectly in my square?
Is there a way to change the round edges of the icon (without actually having to make changes to the font-awesome source code?) Thank you.
HTML:
<input type="checkbox" name="checkbox" id="checkbox"class="checkboxClass"/>
<label for="checkbox" class="labelForCheckboxClass"></label>
CSS:
.checkboxClass {
opacity: 0;
}
.labelForCheckboxClass {
position: relative;
font-size: 16px;
cursor: pointer;
padding-left: 20.5px;
padding-top: 0;
padding-bottom: 0;
border: 1px solid gray;
background-color: white;
}
.labelForCheckboxClass:after {
content: '\f14a';
max-width: 0;
overflow: hidden;
opacity: 0.5;
line-height: 20px;
border-radius: 0;
}
.labelForCheckboxClass:before, .labelForCheckboxClass:after {
font-family: FontAwesome;
font-size: 25px;
position: absolute;
top: 0;
left: 0;
}
.checkboxClass:checked ~ label:after {
max-width: 25px;
opacity: 1;
}
Here is the JsFiddle.
the problem is that you are trying to fill a square box space with a graphic that has rounded borders. You can't modify the border of the checkmark with css because is the shape of the font... You don't have access to that property with css.
one work around would be to have the square with border-radius I you may see here:
http://jsfiddle.net/leojavier/0h7gfdq6/1/
.labelForCheckboxClass {
position: relative;
font-size: 16px;
cursor: pointer;
padding-left: 21.5px;
padding-bottom: 2px;
border: 1px solid gray;
background-color: #FFF;
border-radius:4px;
}
In the other hand if you want to keep the sharp square edges of the box, you may want to use the checkmark icon (white) without the background from font-awesome and just toggle the background color of your label to (black) on click with javascript.
Here is a version without removing the sharp edges:
http://jsfiddle.net/leojavier/0h7gfdq6/3/
EDIT:
For square corners try this:
.checkboxClass {
opacity: 0;
}
.labelForCheckboxClass {
position: relative;
font-size: 16px;
cursor: pointer;
padding-left: 17px;
padding-top: 0;
padding-bottom: 0;
border: 1px solid gray;
background-color: white;
}
.labelForCheckboxClass:after {
content: '\f00c';
color:white;
background-color: black;
max-width: 0;
}
.labelForCheckboxClass:before, .labelForCheckboxClass:after {
font-family: FontAwesome;
font-size: 17px;
position: absolute;
top: 0;
left: 0;
height:1.05em;
}
.checkboxClass:checked ~ label:after {
max-width: 17px;
opacity: 1;
}
Try with this:
.labelForCheckboxClass {
position: relative;
font-size: 18px;
cursor: pointer;
padding-left: 21.5px;
padding-top: 0;
padding-bottom: 0;
border: 1px solid gray;
background-color: white;
border-radius: 4px;
}
Well also adding right: 0 and bottom: 0 to .labelForCheckboxClass:before, .labelForCheckboxClass:after helps to an extent.
Here's your updated fiddle: http://jsfiddle.net/4zjtp/134/