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>
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;
}
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;
}
How can I place the tooltip centered and directly under the red circle without Javascript? Thank you in advance! :-)
Here is an image of my problem and the marked position where it should be:
My code currently looks like this:
HTML code:
<li>
<a class="ovm-oup_tooltip" href="#">
<div id="ovm-oup_under_item_1" class="ovm-oup_under_item">
<span>Text</span>
<img src="Example_Logo.svg" alt="">
</div>
</a>
</li>
CSS code:
#ovm-oup_under ul{
text-align: center;
list-style-type: none;
padding: 0;
}
#ovm-oup_under li{
padding: 20px;
margin: 15px;
display: inline-block;
}
.ovm-oup_under_item{
width: 96px;
height: 96px;
border-radius: 50%;
box-shadow: 0 0 20px 5px rgba(0,0,0,.2);
margin: 5px 5px 35px 5px;
}
.ovm-oup_tooltip {
position: relative;
display: inline;
}
.ovm-oup_tooltip span {
position: absolute;
width: auto;
padding: 3px 15px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 4px;
}
.ovm-oup_tooltip span:after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-bottom: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
.ovm-oup_tooltip:hover span {
visibility: visible;
margin: 0;
top: 0%;
left: 50%;
z-index: 999;
}
One solution would be to combine absolute placement of the tooltip (relative to the parent div), with a translation transformation on the tooltip, which would achieve the required placement:
/* Extracted styling to top of style sheet to show the required additions */
.ovm-oup_tooltip span {
/* Offset the tooltip 50% from left side of parent (div) width
and 100% from top edge of parent height */
left: 50%;
top: 100%;
/* Pull the tooltip back 50% of it's own width, nudge the tool
tip downward 8px to account for arrow point */
transform: translate(-50%, 8px);
}
.ovm-oup_under_item {
/* Allow absolute placement of children (tooltip) */
position: relative;
}
/* Your existing styling starts here */
.ovm-oup_under_item {
width: 96px;
height: 96px;
border-radius: 50%;
box-shadow: 0 0 20px 5px rgba(0, 0, 0, .2);
margin: 5px 5px 35px 5px;
}
.ovm-oup_tooltip {
position: relative;
display: inline;
}
.ovm-oup_tooltip span {
position: absolute;
width: auto;
padding: 3px 15px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 4px;
}
.ovm-oup_tooltip span:after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
border-bottom: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
.ovm-oup_tooltip:hover span {
visibility: visible;
margin: 0;
/* Remove
top: 0%;
*/
left: 50%;
z-index: 999;
}
<a class="ovm-oup_tooltip" href="#">
<div id="ovm-oup_under_item_1" class="ovm-oup_under_item">
<span>Text</span>
<img src="Example_Logo.svg" alt="">
</div>
</a>
The idea here is to use absolute placement of the tooltip (ie the span), to position the top-left corner of that span at the horizontal center, and bottom edge of the parent div. The transform rule is then used to offset the tooltip span relative to it's own dimensions, to achieve the final center/baseline placement.
You can merge the additions above with your existing styling - I extracted the changes to the top of the stylesheet to clarify the additons that were made to achieve the desired result. Hope that helps!
I'm trying to add a little feature to my website, where the user can hover over a question mark before inserting input where the question mark will display more info about what the question is asking. This is what i'm doing so far, but it's displaying the little Tool Tip feature on it's own separate line (which i know is because of the tags), but I want the Label and the little question mark to be next to each other.
<div>
<label htmlFor="dropdown"> Table Name: </label>
<div className="help-tip">
<p> More info about what this is asking for exactly.</p>
</div>
<input
className='input'
value={this.state.selectedSchema.value}
onChange={(event) => this.setState({ selectedTableName:
event.target.value })
}>
</input>
</div>
CSS:
.help-tip{
top: 18px;
text-align: center;
background-color: #0095d9;
border-radius: 50%;
width: 20px;
height: 20px;
font-size: 10px;
line-height: 21px;
cursor: default;
margin-left: 320px;
}
.help-tip:before{
content:'?';
font-weight: bold;
color:#fff;
}
.help-tip:hover p{
display:block;
transform-origin: 0% 100%;
-webkit-animation: fadeIn 0.3s ease-in-out;
animation: fadeIn 0.3s ease-in-out;
}
.help-tip p{ /* The tooltip */
display: none;
text-align: left;
background-color: #0095d9;
padding: 10px;
width: 300px;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
right: -4px;
color: #FFF;
font-size: 10px;
line-height: 1.4;
}
.help-tip label{
display:block;
width: 300px;
height: 300;
text-align: left;
margin-left: 0px;
margin-right: 300px;
}
.help-tip p:before{ /* The pointer of the tooltip */
content: '';
width:0;
height: 0;
border:6px solid transparent;
border-bottom-color:#0095d9;
right:10px;
top:-12px;
}
.help-tip p:after{ /* Prevents the tooltip from being hidden */
width:100%;
height:40px;
content:'';
top:-40px;
left:0;
}
ToolTip HTML & CSS credit goes to: https://tutorialzine.com/2014/07/css-inline-help-tips
Check this out I used a container to use flex box on the label and the ? element also i changed the left margin of the ? element so its only 5 px away from your label. Last thing I changed was the z-index on the p element so it would be in front of the input element (this needs a position relative to work).
only showing the changed code.
html:
<div class="input-label-container">
<label htmlFor="dropdown"> Table Name: </label>
<div class="help-tip">
<p>More info about what this is asking for exactly.</p>
</div>
</div>
<input/>
css:
.input-label-container {
display: flex; <-
}
.help-tip {
top: 18px;
text-align: center;
background-color: #0095d9;
border-radius: 50%;
width: 20px;
height: 20px;
font-size: 10px;
line-height: 21px;
cursor: default;
margin-left: 5px; <-
}
.help-tip p { /* The tooltip */
display: none;
text-align: left;
background-color: #0095d9;
padding: 10px;
width: 300px;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
right: -4px;
color: #FFF;
font-size: 10px;
line-height: 1.4;
position: relative; <-
z-index: 999; <-
}
Hope this helps
<div>
<div className="full-width">
<div className="float-left">
<label htmlFor="dropdown"> Table Name: </label>
</div>
<div className="help-tip">
<p> More info about what this is asking for exactly.</p>
</div>
</div>
<input
className="input"
value="Testing"
onChange={event =>
this.setState({ selectedTableName: event.target.value })
}
/>
</div>
CSS would be
.help-tip {
top: 18px;
text-align: center;
background-color: #0095d9;
border-radius: 50%;
width: 20px;
height: 20px;
font-size: 10px;
line-height: 21px;
cursor: default;
margin-left: 100px;
}
.help-tip:before {
content: "?";
font-weight: bold;
color: #fff;
}
.help-tip:hover p {
display: block;
transform-origin: 0% 100%;
-webkit-animation: fadeIn 0.3s ease-in-out;
animation: fadeIn 0.3s ease-in-out;
}
.help-tip p {
/* The tooltip */
display: none;
text-align: left;
background-color: #0095d9;
padding: 10px;
width: 300px;
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
right: 0px;
color: #fff;
font-size: 10px;
line-height: 1.4;
top: -5px;
left: 140px;
position: absolute;
}
.help-tip label {
display: block;
width: 300px;
height: 300;
text-align: left;
margin-left: 0px;
margin-right: 300px;
}
.help-tip p:before {
/* The pointer of the tooltip */
content: "";
width: 0;
height: 0;
border: 6px solid transparent;
border-bottom-color: #0095d9;
right: 10px;
top: -12px;
}
.help-tip p:after {
/* Prevents the tooltip from being hidden */
width: 100%;
height: 40px;
content: "";
top: -40px;
left: 0;
}
.full-width {
width: 100%;
}
.float-left {
max-width: 50%;
float: left;
}
I'm trying to create a popup with 2 inner divs with responsive sizing.
I thought I could achieve this by setting their width and height as percentages of the parent div but it doesn't seem to work. If you resize your browser window, the leftArea div in my jsfiddle falls out of the popup div.
How can I fix this?
jsfiddle
Use box-sizing: border-box; property to set the padding and border inner the box width.
Check more docs here: box-sizing - CSS
body {
background-color: black;
}
.popup {
position: absolute;
margin: 0 auto;
width: 80vw;
height: 10vh;
left: 0%;
right: 0%;
top: 50%;
display: block;
background-color: orange;
border: 2px solid white;
border-radius: 15px;
}
.leftArea {
position: relative;
float: left;
width: 85%;
height: 98%;
margin: 0px;
background-color: red;
border-radius: 14px 0px 0px 14px;
border: 0px;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box; /* Use this property to set the padding inner */
display: inline-block;
text-align: left;
}
.rightArea {
position: relative;
float: right;
width: 12.25%;
height: 100%;
background-color: #123456;
margin: 0px;
display: inline-block;
border-radius: 0px 14px 14px 0px;
border: 0px;
}
<div class="popup">
<div class="leftArea"></div>
<div class="rightArea"></div>
</div>