I am trying to create a pure-CSS popover à la Bootstrap/Popper.js.
The code here works fine, as long as the parent .wrapper element remains larger than the .popover element--the popover is centered. However, if you shrink the screen enough that the table inside the popover keeps the .popover larger than the parent, things start scooching to the right and the triangle is no longer centered. Is it possible to keep an absolutely-positioned child centered when its parent is smaller than it?
Bonus question--how do I get the ::after triangle z-indexed behind the parent .popover div so its shadow doesn't show up like it does now?
.container {
width: 80%;
margin: auto;
}
.container>table {
width: 40%;
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 8px;
}
.text-center {
text-align: center;
}
.wrapper {
/* webkit flicker fix */
-webkit-transform: translateZ(0);
/* webkit text rendering fix */
-webkit-font-smoothing: antialiased;
}
.wrapper .popover {
background: #FFF;
border: 4px solid #EEE;
border-radius: 3px;
font-size: 80%;
font-family: monospace;
bottom: 100%;
left: 50%;
margin-left: -50%;
display: block;
margin-bottom: 5px;
opacity: 0;
pointer-events: none;
position: absolute;
transform: translateY(10px);
transition: all .25s ease-out;
box-shadow: 6px 6px 9px 1px rgba(0, 0, 0, 0.75);
}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.wrapper .popover:before {
bottom: -20px;
content: "";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}
.wrapper .popover:after {
content: "";
display: block;
position: absolute;
width: 15px;
height: 15px;
left: 50%;
bottom: -11.07106781187px;
margin-left: -7.07106781187px;
background: #EEE;
border-right: 4px solid #EEE;
border-bottom: 4px solid #EEE;
border-radius: 3px;
transform: rotate(45deg);
z-index: -1;
box-shadow: 6px 6px 9px 1px rgba(0, 0, 0, 0.75);
}
.wrapper:hover .popover {
opacity: 1;
pointer-events: auto;
transform: translateY(0px);
}
.wrapper .popover table,
.wrapper .popover th,
.wrapper .popover td {
border: none;
}
.wrapper .popover table {
text-transform: uppercase;
text-align: left;
}
.wrapper .popover td {
padding: 5px;
}
.wrapper .popover td:nth-child(1) {
font-weight: bold;
text-align: right;
}
.wrapper .popover tr:nth-child(even) {
background: #EEE;
}
<!DOCTYPE html>
<html>
<head>
<title>Test Popover</title>
</head>
<body>
<div class="container">
<h1>Need Some Space for the Popup to Stay On Screen</h1>
<h2>Filling More Vertical Space</h2>
<table>
<thead>
<tr>
<th>Some</th>
<th>Data</th>
</tr>
</thead>
<tbody>
<tr>
<td>More</td>
<td>Data</td>
</tr>
<tr>
<td class="wrapper text-center">
<i>Popup!</i>
<div class="popover">
<table>
<tbody>
<tr>
<td>Complete</td>
<td>70%</td>
</tr>
<tr>
<td>Noise</td>
<td>blorp</td>
</tr>
<tr>
<td>Status</td>
<td>magical</td>
</tr>
<tr>
<td>UUID</td>
<td>FCC15A57-440F-40F6-A7E5-BF708838028F</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>Data</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Related
On my html , I'm trying to give rowspan=2 to my td. The issue is that the td don't go down and take the row. May be I miss something?
I tried to add more tr and td but it's still not good. Maybe I need to add something?
UPDATE
added my css.
module.exports = (data) => {
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body {
width: 90%;
padding: 0 10px;
margin: 0px;
min-height: 1350px;
background-color: #fff;
}
.pageWrapper {
position: relative;
width: 100%;
direction: rtl;
padding: 0 15px;
}
.header {
position: relative;
width: 100%;
}
.header img {
display: block;
width: 350px;
/* height: 120px; */
margin: 0 auto;
padding: 0;
border:0 none !important;
background-color: transparent !important;
}
.header h1,
.header h2 {
text-align: center;
display: block;
}
.header h1 {
font-size: 1.5rem;
}
.header h2 {
font-size: 1rem;
}
h3 {
background-color: #D3D3D3;
}
table {
width: 100%;
display: block;
// border-collapse: collapse;
margin: 0 auto;
background-color: #fff;
margin: 0;
}
table.newPage {
margin-top: 10px;
}
tbody,
tr,
th,
thead {
width: 100%;
display: block;
}
tr {
display: block;
}
tbody {
border: 1px solid #2c2b7d;
}
thead {
background-color: #2c2b7d;
color: #fff;
}
th {
padding: 4px;
}
tbody th {
text-align: right;
padding: 2px;
border-top: 1px solid #2c2b7d;
color: #2c2b7d;
text-decoration: underline;
font-size: 0.9rem;
}
td {
display: inline-block;
position: relative;
margin: 0;
padding: 0;
min-height: 33px;
border-left: 1px solid #2c2b7d;
border-bottom: 1px solid #2c2b7d;
}
td:not(:first-child) {
margin-right: -5px;
}
td:last-child {
border-left: none;
}
td.col-1 {
width: 8.33333333%;
}
td.col-1-nobroder {
width: 8.33333333%;
border-bottom : none;
}
td.col-2 {
width: 19.9%;
}
td.col-2-email-firstTb {
width: 39.75%;
}
td.col-2-email {
width: 31%;
padding-bottom: 3px;
}
td.col-2-email-noborder {
width: 31%;
padding-bottom: 3px;
border-bottom : none;
}
td.col-2-CoverNameAgent {
width: 34.90%;
}
td.col-2-rhisoynumber {
width: 14.5%;
}
td.col-2-rhisoynumber-noborder {
width: 14.5%;
border-bottom : none;
}
td.col-2-carkind {
width: 10.35%;
}
td.col-2-shildanumber {
width: 15%;
}
td.col-3-second-section {
width: 19.5%;
}
td.col-3 {
width: 25%;
}
td.col-4 {
width: 33.3333333333333%;
}
td.col-5 {
width: 41.6666666666667%;
}
td.col-6 {
width: 50%;
}
td.col-7 {
width: 58.3333333333333%;
}
td.col-8 {
width: 66.6666666666667%;
}
td.col-9 {
width: 75%;
}
td.col-10 {
width: 83.3333333333333%;
}
td.col-11 {
width: 91.6666666666667%;
}
td.col-12 {
width: 100%;
}
td span {
display: block;
width: 100%;
font-size: 0.7rem;
color: #2c2b7d;
font-weight: bold;
text-align: right;
padding-right: 3px;
white-space: nowrap
}
td p {
display: block;
/* position: absolute; */
/* top: 2px; */
/* right: 5px; */
font-size: 0.7rem;
text-align: center;
width: 100%;
color: #000;
white-space: nowrap;
/* background-color: #D3D3D3; */
}
td img {
display: block;
width: 100%;
position: absolute;
top: 0;
max-height: 29px;
}
td p.trems {
position: relative;
text-align: right;
width: 95%;
margin-bottom: 5px;
direction: rtl;
font-size: 0.6rem;
}
label {
font-size: 0.7rem;
position: relative;
top: -2px;
}
.checkbox {
width: 12px;
height: 12px;
position: reletive;
padding-right: 1px;
padding-bottom: 2px;
top: 30px;
right: 20px;
border-radius: 3px;
display: inline-block;
border: 1px solid #2c2b7d;
color: #2c2b7d;
font-size: 12px;
}
.first-section-border {
border: 2px solid black;
}
.section-border-small {
border: 2px solid black;
width: 20%;
height: 100%;
border-spacing: 0 margin-bottom: 20px;
}
.section-border {
border: 2px solid black;
width: 78%;
border-spacing: 0
}
.second-section-border {
border: 2px solid black;
width: 100%;
}
.small-font {
font-size: 9px;
text-align: center;
margin-bottom: 6px
}
.small-font-secTwo{
font-size: 9px;
text-align: center;
margin-bottom: 6px;
border-bottom : none;
}
.small-font-span {
font-size: 8px;
text-align: center;
}
.small-td {
width: 14%;
border-bottom : none;
}
.col-1-name-and-firma {
width: 12%;
}
.name-and-firma {
padding: 0;
// margin-bottom: 1px;
font-size: 11px;
}
.your-fault {
font-size: 10px;
max-width: 5px;
margin-bottom: 4px;
text-align : center;
}
.your-fault-width {
font-size: 10px;
max-width: 5px;
margin-bottom: 4px width: 12%;
}
.your-fault-bitohLemui {
font-size: 10px;
max-width: 5px;
margin-bottom: 4px word-wrap:break-word;
}
input[type='checkbox'] {
/* Double-sized Checkboxes */
-webkit-transform: scale(1);
/* Safari and Chrome */
transform: scale(1);
margin-top: 1px;
margin-right: 5px;
}
.margin-top {
margin-top: 1px;
}
.col-1-ishurEhagastTviaa {
width: 50%;
border-bottom: none;
}
.col-2-thiurKlali {
height: 50px;
}
.signAndDate {
width: 20%;
text-align: right;
border: none;
}
.signAndDateFont {
font-size: 15px;
}
.width20point4 {
width: 20.4%;
}
</style>
</head>
<body>
<div class="pageWrapper">
<!-- Part 4 -->
<table class="first-section-border">
<table>
<tbody>
<tr>
<td style="width: 20%; ">1,1</td>
<td style="width: 20%;">1,2</td>
<td style="width: 20%; ">1,3</td>
<td rowspan=2 style="width: 20%;">1-2,4</td>
<td rowspan=2 style="width: 20%;">1-2,4</td>
</tr>
<tr >
<td style="width: 20%; ">2,1</td>
<td style="width: 20%; ">2,2</td>
<td style="width: 20%; ">2,3</td>
</tr>
</tbody>
</table>
<img src="file:///C:/Users/User/Desktop/htmlIWithPdf/assets/bth.jpg" >
</div>
</body>
</html>
`
}
1st: You need use <tr> tag for conclude the first block of <td> tags (a columns must be inside a row).
2nd: The amount of columns in each row in the table must be equal (argument rowspan="2" of <td> (e.g. <td rowspan="2">...</td>) tag means "minus one column in the next row under this cell").
--- UPDATE 1 ---
Generally, <table>...</table> has syntax (in common view):
<table>
<thead> <!-- Header section -->
<tr>
<th>Column 1 title</th>
<th>Column 2 title</th>
...
<th>Column N title</th>
</tr>
</thead>
<tbody> <!-- Body of table -->
<tr>
<td>Cell (row 1 col 1)</td>
<td>Cell (row 1 col 2)</td>
...
<td>Cell (row 1 col N)</td>
</tr>
...
<tr>
<td>Cell (row M col 1)</td>
<td>Cell (row M col 2)</td>
...
<td>Cell (row M col N)</td>
</tr>
</tbody>
<tfoot> <!-- Table footer -->
<tr>
<td>Col.1 footer</td>
<td>Col.2 footer</td>
...
<td>Col.N footer</td>
</tr>
</tfoot>
</table>
Of course you can exclude any section with all its elements.
--- END OF UPD.1 ---
Use this for example:
<!DOCTYPTE html>
<html>
<head>
<style>
table {
border: 1px solid #000;
}
td {
border: 1px dotted #00F;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td style="width: 13%; ">1,1</td>
<td style="width: 14.5%;">1,2</td>
<td style="width: 13%; ">1,3</td>
<td rowspan=2 style="width: 29%;">1-2,4</td>
<td rowspan=2 style="width: 30.5%; ">1-2,5</td>
</tr>
<tr>
<td style="width: 40.5%; margin-right : 0.3px;">2,1</td>
<td style="width: 40.5%; margin-right : 0.3px;">2,2</td>
<td style="width: 40.5%; margin-right : 0.3px;">2,3</td>
</tr>
</tbody>
</table>
</body>
</html>
--- UPDATE 2 ---
After you update your code, I think the issue is caused by styles inside the <style>...</style> (without them all is right). Are you sure you need to reverse the order of columns by CSS? Maybe more easy way is to put to the columns values in reverse order to the table instead of using a lot of amout of styles?
Try to remove unwanted styles or rewrite them.
P.S.: I hope I correctly understood the essence of your question and was able to provide the necessary advice.
--- END OF UPD.2 ---
I have a CSS layout, with a tooltip. I have links on the page, and when visitor hover over the links, images appear in tooltips. SOmetimes there is only one image in the tooltip, sometimes two images, and even three.
My code looks like:https://jsfiddle.net/vehpw5zn/ (I suggest viewing on jsfiddle, as the builtin code snippet dispays the tooltip only when scrolling with the mouse.)
body {
margin: 64px 10px;
}
table.thumbnails {
border-spacing: 0px;
border-collapse: collapse;
}
table.thumbnails td {
padding: 0px;
margin: 0px;
text-align: left;
}
.tooltiptext img {
border: 1px solid black;
display: inline-block;
padding: 0px;
margin: 0px;
float: left;
}
.tooltip {
position: relative;
display: inline-block;
text-decoration: none;
}
.tooltip .tooltiptext {
display: none;
background-color: rgba(76, 175, 80, 0.5);
color: #fff;
text-align: center;
padding: 10px;
border-radius: 6px;
font-family: 'Courier';
font-size: 12px;
position: absolute;
z-index: 1;
bottom: -300px;
left: 100%;
margin-left: 10px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
display: table;
}
/**to display a small triangle*/
.tooltip .tooltiptext::before {
content: "";
position: absolute;
top: 55px;
left: -5px;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent rgba(76, 175, 80, 0.5) transparent transparent;
}
<a href="#" class="tooltip">
<div class=tooltiptext>
<table class="thumbnails">
<tr>
<td><img src="https://i.imgur.com/NdLpRzU.png" loading="lazy"></td>
<td><img src="https://i.imgur.com/UmyTAgY.png" loading="lazy"></td>
</tr>
</table>
</div>
Link text
</a>
It basically works, but I have a small gap between the two images.
My other problem, is that when I try to display a small captcha image in the tooltip on top of the content, in a different z-index layer, then the height of the small captcha image appears in the previous layer div, and the green part of the div becomes larger. I get a larger margin below the two brown images, which is transparent green. How can I avoid that?
My code for this second phase: https://jsfiddle.net/vehpw5zn/1/
body {
margin: 64px 10px;
}
table.thumbnails {
border-spacing: 0px;
border-collapse: collapse;
}
table.thumbnails td {
padding: 0px;
margin: 0px;
text-align: left;
}
.tooltiptext img {
border: 1px solid black;
display: inline-block;
padding: 0px;
margin: 0px;
float: left;
}
.tooltip {
position: relative;
display: inline-block;
text-decoration: none;
}
.tooltip .tooltiptext {
display: none;
background-color: rgba(76, 175, 80, 0.5);
color: #fff;
text-align: center;
padding: 10px;
border-radius: 6px;
font-family: 'Courier';
font-size: 12px;
position: absolute;
z-index: 1;
bottom: -300px;
left: 100%;
margin-left: 10px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
display: table;
}
/**to display a small triangle*/
.tooltip .tooltiptext::before {
content: "";
position: absolute;
top: 55px;
left: -5px;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent rgba(76, 175, 80, 0.5) transparent transparent;
}
img.captcha {
display:none;
border:1px solid black;
position: relative;
top:-46px;
left:4px;
z-index:3;
}
.tooltip:hover img.captcha {
display: block;
}
<a href="#" class="tooltip">
<div class=tooltiptext>
<table class="thumbnails">
<tr>
<td><img src="https://i.imgur.com/NdLpRzU.png" loading="lazy"></td>
<td><img src="https://i.imgur.com/UmyTAgY.png" loading="lazy"></td>
</tr>
</table>
<img class="captcha" src="data:image/gif;base64,R0lGODlhlgAoAPABAAAAAP///yH5BAAAAAAAIf8LSW1hZ2VNYWdpY2sOZ2FtbWE9MC40NTQ1NDUALAAAAACWACgAAAL+jI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTCPAXefVDXy8DpT8OsMgDxe0ITlLXbGY9PWMzQA0imVOE9esd1c1dLXH8sO8QdfG4/RW3OaGMXFXe55W1JVvzZ51h5fR93dQGHHoFhfYJ5KYeCbo8TR3tABpAYnZsElxhWfJ1wiiKelp6qYHWobTKYQqN3rh+qoqa4VGG3nLCYvoOxuGCZxJDMd7iuzHqvarTCcMoctXMn1M0qVsfY1tzLBteynt/U3++mx4ab7biAoOXu6p3s38Z81MP1G1jgLff4jPi79/Ab84M2iLX5KBCI0YQtcwIpeHEivqC2Uxo8YJjRw7evwI0kIBADs=">
</div>
Link text
</a>
For your second issue, need to modify the position of the captcha image. The position property changed from relative to absolute, then align with bottom property instead of top property. left property changed from 4px to 15px. The value of bottom property and top property can be changed according to your need.
img.captcha {
display: none;
border: 1px solid black;
position: absolute; /* Change from relative to absolute */
bottom: 15px; /* Change from top:-46px; */
left: 15px; /* Change from 4px */
z-index: 3;
}
body {
margin: 64px 10px;
}
table.thumbnails {
border-spacing: 0px;
border-collapse: collapse;
}
table.thumbnails td {
padding: 0px;
margin: 0px;
text-align: left;
}
.tooltiptext img {
border: 1px solid black;
display: inline-block;
padding: 0px;
margin: 0px;
float: left;
}
.tooltip {
position: relative;
display: inline-block;
text-decoration: none;
}
.tooltip .tooltiptext {
display: none;
background-color: rgba(76, 175, 80, 0.5);
color: #fff;
text-align: center;
padding: 10px;
border-radius: 6px;
font-family: 'Courier';
font-size: 12px;
position: absolute;
z-index: 1;
bottom: -300px;
left: 100%;
margin-left: 10px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
display: table;
}
/**to display a small triangle*/
.tooltip .tooltiptext::before {
content: "";
position: absolute;
top: 55px;
left: -5px;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent rgba(76, 175, 80, 0.5) transparent transparent;
}
img.captcha {
display: none;
border: 1px solid black;
position: absolute; /* Change from relative to absolute */
bottom: 15px; /* Change from top:-46px; */
left: 15px; /* Change from 4px */
z-index: 3;
}
.tooltip:hover img.captcha {
display: block;
}
<a href="#" class="tooltip">
<div class=tooltiptext>
<table class="thumbnails">
<tr>
<td><img src="https://i.imgur.com/NdLpRzU.png" loading="lazy"></td>
<td><img src="https://i.imgur.com/UmyTAgY.png" loading="lazy"></td>
</tr>
</table>
<img class="captcha" src="data:image/gif;base64,R0lGODlhlgAoAPABAAAAAP///yH5BAAAAAAAIf8LSW1hZ2VNYWdpY2sOZ2FtbWE9MC40NTQ1NDUALAAAAACWACgAAAL+jI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTCPAXefVDXy8DpT8OsMgDxe0ITlLXbGY9PWMzQA0imVOE9esd1c1dLXH8sO8QdfG4/RW3OaGMXFXe55W1JVvzZ51h5fR93dQGHHoFhfYJ5KYeCbo8TR3tABpAYnZsElxhWfJ1wiiKelp6qYHWobTKYQqN3rh+qoqa4VGG3nLCYvoOxuGCZxJDMd7iuzHqvarTCcMoctXMn1M0qVsfY1tzLBteynt/U3++mx4ab7biAoOXu6p3s38Z81MP1G1jgLff4jPi79/Ab84M2iLX5KBCI0YQtcwIpeHEivqC2Uxo8YJjRw7evwI0kIBADs=">
</div>
Link text
</a>
I'm trying to create a simple tooltip without the need for js.
I'm wondering what the best approach is. I want dynamic text to be able to fit in a tooltip container smoothly, responsively on top of its container, the issue with the current code is that it doesn't stretch on its own, it breaks words into new lines which changes the height of the whole thing and then the positioning is off and it overlaps its container.
table {
margin-top: 100px;
}
td {
border: solid 1px #000;
height: 25px;
width: 25px;
position: relative;
}
div {
position: absolute;
top: -25px;;
}
span {
display: inline-block;
border-radius: 5px;
background: #000;
color: #fff;
position: absolute;
font-size: 15px;
padding: 5px;
width: auto;
}
td:hover div span {
display: inline-block;
}
<table>
<tr>
<td>
something
<div>
<span>
text
</span>
</div>
</td>
<td>
something
<div>
<span>
some long text
</span>
</div>
</td>
</tr>
</table>
You mean something like? Let me know.
If you want your tooltip above hover item, add bottom:100% to tooltip element.
table {
margin-top: 100px;
}
td {
border: solid 1px #000;
height: 25px;
width: 150px;
position: relative;
/*style to show it better to you*/
display:block;
margin-right:50px;
float:left;
}
div {
position: absolute;
bottom: 100%;
left:50%;
width:60px;
margin-left:-30px;
}
span {
display: none;
border-radius: 5px;
background: #000;
color: #fff;
font-size: 15px;
padding: 5px;
width: auto;
margin-bottom: 5px;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: normal;
white-space: nowrap;
width:100%;
text-align:center;
}
td:hover div span {
display: inline-block;
}
<table>
<tr>
<td>
something
<div>
<span>
text
</span>
</div>
</td>
<td>
something
<div>
<span>
some long text
</span>
</div>
</td>
</tr>
</table>
If you don't want to break text in tooltip you can use white-space: nowrap. You can also use transform: translate() to position tooltip in middle of td With arrow
table {
margin-top: 100px;
}
td {
border: solid 1px #000;
position: relative;
}
span {
border-radius: 5px;
background: #000;
color: #fff;
position: absolute;
white-space: nowrap;
padding: 5px;
top: 0;
left: 50%;
transform: translate(-50%, -100%);
opacity: 0;
transition: all 0.3s ease-in;
}
td:hover span {
opacity: 1;
}
<table>
<tr>
<td>something<span>text</span></td>
<td>something<span>some long text</span></td>
<td>Lorem ipsum dolor.<span>Lorem ipsum dolor sit amet, consectetur.</span></td>
</tr>
</table>
Or if you want tooltip to be same size as td you can use width: 100%
table {
margin-top: 100px;
}
td {
border: solid 1px #000;
position: relative;
}
span {
border-radius: 5px;
background: #000;
color: #fff;
position: absolute;
width: 100%;
padding: 5px;
top: 0;
left: 50%;
transform: translate(-50%, -100%);
opacity: 0;
transition: all 0.3s ease-in;
}
td:hover span {
opacity: 1;
}
<table>
<tr>
<td>something<span>text</span></td>
<td>something<span>some long text</span></td>
<td>Lorem ipsum dolor.<span>Lorem ipsum dolor sit amet, consectetur.</span></td>
</tr>
</table>
You can also use :after pseudo element to add small arrow under tooltip
table {
margin-top: 100px;
}
td {
border: solid 1px #000;
position: relative;
}
span {
border-radius: 5px;
background: #000;
color: #fff;
position: absolute;
width: 100%;
padding: 5px;
top: -10px;
left: 50%;
transform: translate(-50%, -100%);
opacity: 0;
transition: all 0.3s ease-in;
}
span:before {
width: 0;
height: 0;
content: '';
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid black;
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%, 100%);
}
td:hover span {
opacity: 1;
}
<table>
<tr>
<td>something<span>text</span></td>
<td>something<span>some long text</span></td>
<td>Lorem ipsum dolor.<span>Lorem ipsum dolor sit amet, consectetur.</span></td>
</tr>
</table>
table {
margin-top: 100px;
}
td {
border: solid 1px #000;
height: 25px;
width: 25px;
position: relative;
}
div {
position: absolute;
top: -25px;;
}
span {
display: inline-block;
border-radius: 5px;
background: #000;
color: #fff;
position: absolute;
font-size: 15px;
padding: 5px;
width: auto;
white-space: nowrap;
}
td:hover div span {
display: inline-block;
}
<table>
<tr>
<td>
something
<div>
<span>
text
</span>
</div>
</td>
<td>
something
<div>
<span>
some long text
</span>
</div>
</td>
</tr>
</table>
Try using white-space: nowrap;
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I've got this problem - after adding .table-responsive class the table header tooltips got lost overflow-x: auto - Setting it off makes it alright but disables the responsivness of the table.
I've created code snippet to show you
https://jsfiddle.net/kristjanrei/74aa8x6u/
Default code for tooltip
.container {
padding: 200px;
}
.custom-tooltip-hover {
position: relative;
}
.custom-tooltip { /* hide and position tooltip */
position: absolute;
bottom: 100%;
left: 0px;
background-color: #000;
color: #fff;
line-height: initial;
visibility: hidden;
border: 1px solid #fff;
text-align: left;
padding-left: 8px;
padding-right: 8px;
padding-top: 4px;
padding-bottom: 4px;
margin-bottom: 4px;
z-index: 110;
transition-delay: 0.33s;
font-size: 13px;
font-weight: initial;
word-break: inherit;
font-size: 12px;
white-space: normal;
}
.custom-tooltip.left {
left: initial;
right: 0px;
}
.custom-tooltip:after {
content: '';
position: absolute;
top: 100%;
left: 12%;
width: 0; height: 0;
border-top: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
.custom-tooltip.left:after {
left: initial;
right: 12%;
}
.custom-tooltip-hover:hover .custom-tooltip {
visibility: visible;
display: inline;
transition-delay: 0.88s;
-webkit-transition-delay: 0.88s; /* Safari */
}
.break-tooltip {
word-break: break-all;
}
A snippet from jsfiddle of a broken tooltip.
Way it works every where else
I have added this on the div panel and it has worked style="overflow:visible;
.container {
padding: 200px;
}
.custom-tooltip-hover {
position: relative;
}
.custom-tooltip { /* hide and position tooltip */
position: absolute;
bottom: 100%;
left: 0px;
background-color: #000;
color: #fff;
line-height: initial;
visibility: hidden;
border: 1px solid #fff;
text-align: left;
padding-left: 8px;
padding-right: 8px;
padding-top: 4px;
padding-bottom: 4px;
margin-bottom: 4px;
z-index: 11000000;
transition-delay: 0.33s;
font-size: 13px;
font-weight: initial;
word-break: inherit;
font-size: 12px;
white-space: normal;
}
.custom-tooltip.left {
left: initial;
right: 0px;
}
.custom-tooltip:after {
content: '';
position: absolute;
top: 100%;
left: 12%;
width: 0; height: 0;
border-top: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
.custom-tooltip.left:after {
left: initial;
right: 12%;
}
.custom-tooltip-hover:hover .custom-tooltip {
visibility: visible;
display: inline;
transition-delay: 0.88s;
-webkit-transition-delay: 0.88s; /* Safari */
}
.break-tooltip {
word-break: break-all;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="custom-tooltip-hover">
<div>
Working header
</div>
<span class="custom-tooltip">
Tooltip for head
</span>
</div>
<div class="panel panel-default">
<div class="panel-body table-responsive" style="overflow:visible;">
<table class="table-hover">
<thead>
<tr>
<th>
<div class="custom-tooltip-hover">
<div>
Broken Header
</div>
<span class="custom-tooltip">
Tooltip for head
</span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td> Content for head</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
If you want to hide some part of content with overflow, then you are able to use position:fixed for the .custom-tooltip class and place it with js.
Checkout the library tether (bootstrap also use it for tooltips), there are a lot of options, to attache the element to another element. I think it'll be much easier.
I have been trying to implement many different tooltips on this page for my client, he's adamant that we have a picture of the product show up when you hover over the product name in the order page. I decided to use the super simple CSS tooltip, it's very easy to implement and does exactly what we want. It works on a dynamic page, the others I tried didn't.
I have made an example here: CSS tooltip in table example.<-- updated to remove errors.
HTML:
<table class="mytable" id="cart">
<tr id="titles">
<th id="varekodetext">Varekode</th>
<th id="produkttext">Produkt</th>
<th id="pristext">Pris</th>
<th id="emptee"> </th>
<th id="antalltext">Antall</th>
<th id="pristotaltext">Pris Total</th>
<th id="sletttext">Slett</th>
</tr>
<tbody>
<tr class="even first" id="topborder" height="40px">
<td class="cart2Varekode"> <span>39261-02 </span>
</td>
<td class="cart2Produkt"> <a href="/Plantronics-CS361N.11" target="_blank" class="tooltip" title="Plantronics CS361N">
Plantronics CS361N
<span>
<img src="http://www.euroworker.no/public/upload/productimage/220-353-2.jpg" alt="Plantronics CS361N" />
</span>
</a>
<p>
</p>
</td>
<td class="cart2Price">
<span class="actualPrice">2390.-</span>
</td>
<td class="cart2Salg">
<span class="orderlistPrice"></span>
</td>
<td class="antallbox">
<span class="cartQuant"><input name="item_1363" class="DG-spinner" id="text" type="text" value="1"/> <span class="cartUpdate"><button type="submit" class="submit" id="rfrsh_btn" name="saveFields" title="Oppdater" value=""> </button></span>
</span>
</td>
<td class="cart2Total">
<span class="basePrice">2390.-</span><span class="actualPrice">2390.-</span>
</td>
<td class="delete">
<a class="slett" href="../..//order/delete/1363?return=" title="Slett">Remove</a>
</td>
</tr>
<tr class="odd last" id="topborder" height="40px">
<td class="cart2Varekode"> <span>7050-20</span>
</td>
<td class="cart2Produkt"> <a href="/Target-7050CC-Duo-UNC.7" target="_blank" class="tooltip" title="Target 7050CC Duo UNC">Target 7050CC Duo UNC<span>
<img src="upload/productimage/7-250-2.jpg?1251022192" alt="Target 7050CC Duo UNC" />
</span>
</a>
<p>
<div class="productOptions" style="color:#b2b2b2;">
<div class="nonEditableOption">
Skal tilkobles: Alcatel IP Touch
</div>
<div class="productOptionsMenu">
<a style="color:#6c8aa2;" href="/order/options/1377" ajax="/order/optionForm/1377">Endre valg</a>
</div>
</div>
</p>
</td>
<td class="cart2Price"><span class="actualPrice">899.-</span>
</td>
<td class="cart2Salg">
<span class="salg" title="Rabatt"> </span>
<span class="orderlistPrice" title="Opprinnelige prisen">
(1599.-)
</span>
</td>
<td class="antallbox">
<span class="cartQuant"><input name="item_1377" class="DG-spinner" id="text" type="text" value="1"/>
<span class="cartUpdate"><button type="submit" class="submit" id="rfrsh_btn" name="saveFields" title="Oppdater" value=""> </button></span>
</span>
</td>
<td class="cart2Total">
<span class="basePrice">899.-</span><span class="actualPrice">899.-</span>
</td>
<td class="delete">
<a class="slett" href="../..//order/delete/1377?return=" title="Slett">Remove</a>
</td>
</tr>
<tr>
<td colspan="6" class="cols-six"></td>
</tr>
<tr id="topborder-tr">
<td class="subTotalCaption2"> </td>
<td colspan="4" class="subTotalCaption2">Mva (25%):</td>
<td class="amount taxAmount2">822.-</td>
<td> </td>
</tr>
<tr>
<td class="subTotalCaption2"> </td>
<td colspan="4" class="subTotalCaption2">Totalt:</td>
<td class="subTotal2">4111.-</td>
<td> </td>
</tr>
<tr>
<td colspan="5"></td>
<td class="cartQuant"></td>
<td> </td>
</tr>
<tr>
<td colspan="7">
<span> </span>
<div class="checkoutButtons">
<span> </span>
</div>
</td>
</tr>
<script type="text/javascript">
new Order.OptionLoader($('cart'));
</script>
</tbody>
</table>
CSS:
.cart2Produkt a:hover {
background: #ffffff;
text-decoration: none;
z-index: 999;
}
/*BG color is a must for IE6*/
.tooltip {
text-align: left;
}
.cart2Produkt a.tooltip span {
z-index: 999;
display: block;
position: absolute;
left: -999px;
opacity: 0;
padding: 2px 3px;
margin-left: 8px;
width: 130px;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 500ms;
}
.cart2Produkt a.tooltip:hover span {
z-index: 999;
display: block;
position: absolute;
right: 50%;
opacity: 1;
background: #ffffff;
border: 1px solid #cccccc;
color: #6c6c6c;
top: -35px;
left: -15px;
z-index: 10;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-align: center;
vertical-align: middle;
padding: 1px;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
/**************IGNORE BELOW*************/
#topborder {
/*border-top: 1px #ccc solid;*/
padding-bottom: 10px;
}
#topborder-tr {
border-top: 1px #ccc solid;
}
.mytable {
width: 100%;
margin-bottom: 20px;
}
.mytable,
.mytable th,
.mytable tr,
.mytable td {
border: 0;
letter-spacing: 1px;
}
.mytableborders,
.mytableborders th,
.mytableborders tr,
.mytableborders td {
border: 1px #ccc solid;
/*width:670px;*/
}
.mytable td,
.mytable td span {
padding-bottom: 0;
padding-top: 5px;
/*border-top: 1px #ccc solid;*/
vertical-align: middle;
font-size: 12px;
}
.mytable th {
vertical-align: bottom;
height: 30px;
padding-bottom: 5px;
}
#titles {
margin: 0px auto 0px auto;
width: 100%;
padding-bottom: 50px;
z-index: 1;
border: 1px #ccc solid;
border-left: none;
border-right: none;
}
.cart2Produkt a {
color: #0a5692;
text-decoration: none;
line-height: 15px;
clear: both;
z-index: 999;
}
productOptionsMenu {
clear: both;
}
#pristotaltext p,
#varekodetext p,
#sletttext p,
#pristext p,
#antalltext p,
#produkttext p {
font: 12px/11px "Helvetica";
margin: 0px;
color: #828273;
text-align: left;
}
#thinline,
#thinlinecopy {
background: url(../../upload/thinline.png) no-repeat;
visibility: visible;
position: absolute;
left: 0px;
z-index: 4;
width: 747px;
height: 1px;
}
#thinlinefakt {
background: url(../../upload/thinline.png) no-repeat;
visibility: visible;
position: absolute;
top: 100px;
left: 0px;
z-index: 4;
width: 747px;
height: 1px;
}
#thinlinefakt2 {
background: url(../../upload/thinline.png) no-repeat;
background-position: bottom;
visibility: visible;
position: absolute;
top: 205px;
left: 0px;
z-index: 4;
width: 747px;
height: 28px;
margin: 5px;
margin-left: 10px;
margin-top: 0px;
padding: 5px;
color: #000000;
font-size: 22px;
font-family: "Helvetica";
}
.Fadresse {
display: block;
margin: 5px;
padding: 0;
color: #000000;
font-size: 22px;
font-family: "Helvetica";
}
#thinlinecopylever {
background: url(../../upload/thinline.png) no-repeat;
background-repeat: repeat-x;
position: relative;
left: 0px;
top: -3px;
width: 100%;
height: 1px;
padding: 0px;
}
#varekodetext {
width: 65px;
padding-left: 5px;
text-align: center;
}
#produkttext {
width: 150px;
}
/*#sgproductview {
margin: 0px auto 0px auto;
width: 595px;
height:1%;
z-index:1;
}*/
#thinlinecopy {
top: 1px;
}
#antalltext {
width: 25px;
text-align: center;
}
#pristotaltext {
width: 10%;
text-align: right;
}
#sletttext {
width: 10%;
text-align: center;
}
#thinline {
top: 19px;
position: absolute;
}
#pristext {
width: 24px;
text-align: center;
}
#emptee {
background-color: none;
width: 40px;
}
/*****************************************CONTENT*/
.cart2Produkt p,
.cart2Varekode p,
.cart2Salg p {
font: 13px/11px "Helvetica";
margin: 0px;
letter-spacing: 1px;
text-align: left;
}
.cart2Produkt p a {
color: #000000;
}
.cart2Total p {
font: 13px/11px "Helvetica";
margin: 0px;
letter-spacing: 1px;
text-align: left;
color: #000000;
}
.cart2Varekode {
visibility: visible;
z-index: 2;
text-align: center;
vertical-align: top;
padding-top: 3px;
font-weight: bold;
}
.cart2Produkt {
visibility: visible;
text-decoration: none;
text-align: left;
position: relative;
width: 28%;
font-weight: bold;
padding-bottom: 2px;
}
.cart2Produkt a {
white-space: nowrap;
}
.cart2Price {
visibility: visible;
z-index: 2;
text-align: right;
width: 6%;
position: relative;
font-weight: bold;
}
.cart2Price p {
font: 13px/11px "Helvetica";
margin: 0px;
letter-spacing: 1px;
text-align: right;
width: 80%;
}
.cart2Total p {
font-weight: bold;
text-align: right;
}
.cart2Salg p {
color: #B2B2B2;
width: 20%;
}
.cart2Total {
visibility: visible;
z-index: 2;
text-align: right;
font-weight: bold;
}
.antallbox {
white-space: nowrap;
text-align: center;
}
.antallbox input {
text-align: right;
outline: none;
width: 30px;
}
.antallbox input:focus {
text-align: right;
outline: none;
border: 1px #000 solid;
background-color: #F0F7FD;
}
.cartQuant {
width: 30px;
/* white-space: nowrap;*/
text-align: left;
margin-top: 5px;
}
.cart2Salg {
visibility: visible;
z-index: 2;
padding: 0;
margin: 0;
}
.orderlistPrice {
text-decoration: line-through;
font-weight: bold;
color: #b2b2b2;
font-size: 12px;
}
.salg {
background: url(../../upload/salg.png) no-repeat;
visibility: visible;
z-index: 2;
width: 28px;
height: 24px;
display: inline-block;
position: relative;
}
.delete {
visibility: visible;
z-index: 2;
height: 21px;
background: none;
text-align: center;
}
.slett {
width: 24px;
height: 19px;
background-image: url(../../upload/delete_box_sprite.png);
background-position: 0 0;
text-decoration: none;
display: inline-block;
}
.slett:hover {
width: 24px;
height: 19px;
background-image: url(../../upload/delete_box_sprite.png);
background-position: -24px 0;
text-decoration: none;
display: inline-block;
}
.productOptions {
background-color: #fff;
postion: absolute;
visibility: visible;
display: block;
top: 3px;
padding-left: 5px;
padding-bottom: 10px;
}
.nonEditableOption {
background-color: #fff;
float: left;
postion: absolute;
margin-right: 10px;
visibility: visible;
display: block;
}
This page used to be displayed using divs, I have since changed it to a table, as it's tabular data and easier to work with. It worked fine when it used divs, now it's in a table, it won't display the span on hover.
My questions are:
Why is it not working?
How can I make it work?
If not, does anyone
know another super easy to implement
tooltip that can work properly on a
dynamic page?
Here's the DIV tooltip for reference: DIV display tooltip.
HTML:
<div id="JSwrap">
<div id="cart2Produkt">
<p><a href="/Target-7050-Softphone-USB-Duo.220" target="_blank" class="tooltip" title="Target 7050 Softphone USB Duo ">Target 7050 Softphone USB Duo
<span><img src="http://www.euroworker.no/public/upload/productimage/220-353-2.jpg?1251413379" alt="Target 7050 Softphone USB Duo " />
<br />
</span>
</a>
</p>
</div>
</div>
CSS:
#JSwrap {
/*for jsfiddle only*/
position: absolute;
left: 100px;
top: 50px;
}
#cart2Produkt {
border: 1px solid #ccc;
width: 500px;
text-align: left;
padding: 10px;
}
#cart2Produkt a.tooltip span {
z-index: 999;
display: block;
position: absolute;
left: -999px;
opacity: 0;
padding: 2px 3px;
margin-left: 8px;
width: 130px;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 500ms;
}
#cart2Produkt a.tooltip:hover span {
z-index: 999;
display: block;
position: absolute;
right: 50%;
opacity: 1;
background: #ffffff;
border: 1px solid #cccccc;
color: #6c6c6c;
top: -35px;
left: -15px;
z-index: 10;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-align: center;
vertical-align: middle;
padding: 1px;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}
#cart2Produkt img {
z-index: 999;
}
Edit: Just noticed it half works in IE8.
Update: It's now working in all browsers, thanks to Daniel pointing out my CSS errors, but is there a way to make it display outside of the table cell?
Find a more readable working solution here:
.cart { width: 100%; }
.hasTooltip span {
display: none;
color: #000;
text-decoration: none;
padding: 3px;
}
.hasTooltip:hover span {
display: block;
position: absolute;
background-color: #FFF;
border: 1px solid #CCC;
margin: 2px 10px;
}
<table class="cart">
<tr>
<th id="pos">Pos</th>
<th id="name">Product</th>
<th id="price">Price</th>
</tr>
<tbody>
<tr>
<td>1</td>
<td>
<a href="productdetails.htm" class="hasTooltip">Flatscreen
<span>New visual experience!</span>
</a>
</td>
<td>19.99</td>
</tr>
<tr>
<td>2</td>
<td>
<a href="productdetails.htm" class="hasTooltip">Headset
<span>Inject music directly into your ears!</span>
</a>
</td>
<td>19.99</td>
</tr>
</tbody>
</table>
You seem to have a problem with CSS. Simply using styles of the working JSFiddle demo should fix it. You had the span set as display:none, however it looks like this tooltip works by hiding the image from the screen, using left:-999px.
Check this: http://jsfiddle.net/WNzhJ/
I have checked your code, and as you can see by the jsfiddle sytax hightlighting there are a lot of errors in your code: for example the span you who starts in your a finishes outside your a. The CSS should work like this. There are a few more errors. i think if you correct them its gonna work. (simply pass the w3c check, then anything should be just fine)
edit: i missed a thing your link should be position: relative; because your tooltip is position: absolute, the absolute always is relative to the last relative parent.
also remove the opacity: 0 in your original span
I was trying the same thing, trying to get a CSS tooltip to appear outside of the table cell. In my case the table cell was only 1px wide so it HAD to show up outside. I found out that by making the :hover span position: absolute; and then adding margin: -37px 0px 0px -50px; I could use that to move the tooltip around. BUT! If I tried to adjust the top/left/bottom/right then the absolute setting positioned it absolutely on the screen, not relative to the cell.
Hope this helps someone.