I'm trying to apply a CSS Tooltip to a table entire row not just to a cell but I can't figure out how.
Right now I'm only be able to apply a tooltip over a cell (as you can see on the snippet). Is it possible to apply a CSS Tooltip to a <tr> element? How?
This new gif shows exactly what I'm trying to achieve
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: none;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body>
<div class="w3-container">
<h2>Directory Test</h2>
<table class="w3-table-all w3-hoverable">
<thead>
<tr class="w3-light-grey">
<th>Name</th>
<th>Position</th>
<th>Phone</th>
<th>Email</th>
</tr>
</thead>
<tr>
<td><div class="tooltip">Name #1<span class="tooltiptext"><img src="http://arsil.games/images/logo-02.png"></span></div></td>
<td>Director #1</td>
<td>152</td>
<td>Email #1</td>
</tr>
</table>
</div>
</body>
</html>
Thanks in advance
If I understand what you're trying to achieve, all you need to do is insert your tooltip div into each of the table's cells in that row, like so:
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
/*visibility: hidden;*/
display: none;
width: 120px;
background-color: none;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
/*visibility: visible;*/
display: block;
}
</style>
<body>
<div class="w3-container">
<h2>Directory Test</h2>
<table class="w3-table-all w3-hoverable">
<thead>
<tr class="w3-light-grey">
<th>Name</th>
<th>Position</th>
<th>Phone</th>
<th>Email</th>
</tr>
</thead>
<tr>
<td><div class="tooltip">Name #1<span class="tooltiptext"><img src="https://i.imgur.com/eC8m7Cc.png"></span></div></td>
<td><div class="tooltip">Director #1<span class="tooltiptext"><img src="https://i.imgur.com/eC8m7Cc.png"></span></div></td>
<td><div class="tooltip">152<span class="tooltiptext"><img src="https://i.imgur.com/eC8m7Cc.png"></span></div></td>
<td><div class="tooltip">Email #1<span class="tooltiptext"><img src="https://i.imgur.com/eC8m7Cc.png"></span></div></td>
</tr>
</table>
</div>
</body>
</html>
However, I don't think you really understand what's going on here. This is not a "CSS tooltip" (no such thing exists). All it is is a simple HTML element styled with CSS such that it displays itself whenever you hover over its parent element. So, wherever you want there to be a tooltip, you'll need to add that class="tooltip" div (and its child span element).
It's also worth noting that the formatting of this div seems somewhat sloppy to me. In your CSS you've styled the tooltip with visibility: hidden rather than display: none. The difference between these two is that elements with visibility: hidden still take up space (have width and height) whereas elements with display: none don't "take up space". I believe that for a tooltip the desired option would be display: none, since tooltips are generally just supposed to be overlayed over the webpage's elements. (The code snippet I've provided has changed visibility: hidden to display: none.)
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.tooltip {
position: relative;
/* display: inline-block; */
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: none;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
.tooltip-relative {
position: relative;
}
</style>
<body>
<div class="w3-container">
<h2>Directory Test</h2>
<table class="w3-table-all w3-hoverable">
<thead>
<tr class="w3-light-grey">
<th>Name</th>
<th>Position</th>
<th>Phone</th>
<th>Email</th>
</tr>
</thead>
<tr class="tooltip">
<td><div class="tooltip-relative">Name #1<span class="tooltiptext"><img src="https://i.imgur.com/eC8m7Cc.png"></span></div></td>
<td>Director #1</td>
<td>152</td>
<td>Email #1</td>
</tr>
</table>
</div>
</body>
</html>
Related
In the following example the gray "td" bar will fill the entire window width, but I can't get the encapsulated link to. I want the entire bar to be an active link, not just the text:
<html>
<head>
<style type="text/css">
<!-- table,
tr,
td {
width: 100%;
background: gray;
}
a {
width: 100%;
text-align: left;
color: white;
background-color: black;
font-size: 24px
}
-->
</style>
</head>
<body>
<table>
<tr>
<td>test</td>
</tr>
</table>
</body>
</html>
Unfortunately, I don't have the ability to change the order of the HTML elements. This must be solved only by CSS/Javascript.
Simply add display: flex; to a in the CSS:
<html>
<head>
<style type="text/css">
<!--
table, tr, td {width: 100%;background: gray;}
a {width:100%;
text-align:left;
color:white;
background-color:black;
font-size: 24px;
display: flex;
}
-->
</style>
</head>
<body>
<table>
<tr>
<td>test</td>
</tr>
</table>
</body>
</html>
Adding display:block could do it.
<html>
<head>
<style type="text/css">
<!-- table,
tr,
td {
width: 100%;
background: gray;
}
a {
width: 100%;
text-align: left;
color: white;
background-color: black;
font-size: 24px;
display:block
}
-->
</style>
</head>
<body>
<table>
<tr>
<td>test</td>
</tr>
</table>
</body>
</html>
This is how it looks everywhere except in Outlook:
In Outlook it looks like that:
Three tables are used to create the 2-column design, this is the code:
#import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
.ReadMsgBody {
width: 100%;
background-color: #ffffff;
}
.ExternalClass {
width: 100%;
background-color: #ffffff;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
html { width: 100%; }
body {
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
margin: 0;
padding: 0;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
table td { border-collapse: collapse; }
.yshortcuts a { border-bottom: none !important; }
img { display: block !important; }
a {
text-decoration: none;
color: #e54a39;
}
/* Media Queries */
#media only screen and (max-width: 640px) {
body { width: auto !important; }
table[class="table600"] { width: 450px !important; }
table[class="table-container"] { width: 90% !important; }
table[class="container2-2"] {
width: 47% !important;
text-align: left !important;
}
table[class="full-width"] {
width: 100% !important;
text-align: center !important;
}
img[class="img-full"] {
width: 100% !important;
height: auto !important;
}
}
#media only screen and (max-width: 479px) {
body { width: auto !important; }
table[class="table600"] { width: 290px !important; }
table[class="table-container"] { width: 82% !important; }
table[class="container2-2"] {
width: 100% !important;
text-align: left !important;
}
table[class="full-width"] {
width: 100% !important;
text-align: center !important;
}
img[class="img-full"] { width: 100% !important; }
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<title>Test</title>
</head>
<body marginwidth="0" marginheight="0" style="margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; width: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;" offset="0" topmargin="0" leftmargin="0">
<!-- PREFOOTER -->
<table width="100%">
<tr>
<td align="center" bgcolor="orange">
<table class="table600" width="600">
<tr>
<td>
<table class="full-width" width="287" align="left">
<tr>
<td align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
Why do I get this mail?
</td>
</tr>
</table>
<!-- SPACE -->
<table class="full-width" width="1" align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td width="1" height="30" style="font-size: 30px; line-height: 30px;"></td>
</tr>
</table>
<!-- END SPACE -->
<table class="full-width" width="287" align="right">
<tr>
<td align="left" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
Contact Us
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END PREFOOTER -->
</body>
</html>
I already figured that the problem is caused by:
<!-- SPACE -->
<table class="full-width" width="1" align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<tr>
<td width="1" height="30" style="font-size: 30px; line-height: 30px;"></td>
</tr>
</table>
<!-- END SPACE -->
But I don't understand why. How can I replace the spacer to make it work in Outlook but keep the space?
To answer your follow-up about the spacing. Just use padding on the td, padding is well supported and will work fine.
<table class="table600" width="600">
<tr>
<td style="padding-bottom: 30px;">
You can then also adjust that padding with a class in the media query.
Also a side note: You don't need to use attribute css selectors for css anymore. It was an old bug that's been fixed now. So you're free to use standard .class selectors.
I keep trying to convert the below code, but I keep getting either no changes or it breaks the html.
This is the css
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
table {
font-size: 12px;
}
#map {
width: 440px;
}
#listing {
position: absolute;
width: 200px;
height: 470px;
overflow: auto;
left: 442px;
top: 0px;
cursor: pointer;
overflow-x: hidden;
}
#findhotels {
position: absolute;
text-align: right;
width: 100px;
font-size: 14px;
padding: 4px;
z-index: 5;
background-color: #fff;
}
#locationField {
position: absolute;
width: 190px;
height: 25px;
left: 108px;
top: 0px;
z-index: 5;
background-color: #fff;
}
#controls {
position: absolute;
left: 300px;
width: 140px;
top: 0px;
z-index: 5;
background-color: #fff;
}
#autocomplete {
width: 100%;
}
#country {
width: 100%;
}
.placeIcon {
width: 20px;
height: 34px;
margin: 4px;
}
.hotelIcon {
width: 24px;
height: 24px;
}
#resultsTable {
border-collapse: collapse;
width: 240px;
}
#rating {
font-size: 13px;
font-family: Arial Unicode MS;
}
.iw_table_row {
height: 18px;
}
.iw_attribute_name {
font-weight: bold;
text-align: right;
}
.iw_table_icon {
text-align: right;
}
</style>
Here is the HTML file
<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete Hotel Search</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
</head>
<body>
<div id="findhotels">
Find hotels in:
</div>
<div id="locationField">
<input id="autocomplete" placeholder="Enter a city" type="text" />
</div>
<div id="controls">
<select id="country">
<option value="all">All</option>
<option value="au">Australia</option>
<option value="br">Brazil</option>
<option value="ca">Canada</option>
<option value="fr">France</option>
<option value="de">Germany</option>
<option value="mx">Mexico</option>
<option value="nz">New Zealand</option>
<option value="it">Italy</option>
<option value="za">South Africa</option>
<option value="es">Spain</option>
<option value="pt">Portugal</option>
<option value="us" selected>U.S.A.</option>
<option value="uk">United Kingdom</option>
</select>
</div>
<div id="map", class="col-lg-offset-2">
<div id="listing">
<table id="resultsTable">
<tbody id="results"></tbody>
</table>
</div>
<div style="display: none">
<div id="info-content">
<table>
<tr id="iw-url-row" class="iw_table_row">
<td id="iw-icon" class="iw_table_icon"></td>
<td id="iw-url"></td>
</tr>
<tr id="iw-address-row" class="iw_table_row">
<td class="iw_attribute_name">Address:</td>
<td id="iw-address"></td>
</tr>
<tr id="iw-phone-row" class="iw_table_row">
<td class="iw_attribute_name">Telephone:</td>
<td id="iw-phone"></td>
</tr>
<tr id="iw-rating-row" class="iw_table_row">
<td class="iw_attribute_name">Rating:</td>
<td id="iw-rating"></td>
</tr>
<tr id="iw-website-row" class="iw_table_row">
<td class="iw_attribute_name">Website:</td>
<td id="iw-website"></td>
</tr>
</table>
</div>
</div>
</body>
</html>
I have tried multiple ways to get this to be responsive and work with bootstrap 3. I can get the map div to work, just not the controls at the top.
you can see what I have working at http://104.236.207.225/
I followed your link and I see that the controls and map are responsive, but the map is not lining up with the controls because of the offset. The offset sets a margin that pushes the map element to the right. Don't use the offset.
Fix this line:
<div id="map", class="col-lg-offset-2">
Check the error by pasting your entire html here: https://validator.w3.org/
<style>
#ctrtable{width:600px;margin-left:auto;margin-right:auto;}
</style>
Web page has the above style block above to to center table on viewport
When in VisStudio 2013 express running in debug mode css does not render, table is aligned left. However, if I copy and paste the style to an inline style="", the table is rendered in center
???
tom
when defining a style in this way:
<style>
#ctrtable{width: 600px; margin-left: auto; margin-right: auto;}
</style>
You implement the style in this way:
<table id="ctrtable">
<tr>
<td>something</td>
</tr>
</table>
when defining a style in this way:
<style>
.ctrtable{width: 600px; margin-left: auto; margin-right: auto;}
</style>
You implement the style in this way:
<table class="ctrtable">
<tr>
<td>something</td>
</tr>
</table>
Try this sample
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.cntrtable{text-align: center;}
</style>
</head>
<body>
<table style="width: 100%;">
<tr>
<td><table class="cntrtable" style="width: 50%; margin-left: auto; margin-right: auto; background-color: #FF0000;"><tr><td>table-1</td></tr></table></td>
</tr><tr>
<td><table class="cntrtable" style="width: 50%; margin-left: auto; margin-right: auto; background-color: #00FF00;"><tr><td>table-2</td></tr></table></td>
</tr><tr>
<td><table class="cntrtable" style="width: 50%; margin-left: auto; margin-right: auto; background-color: #0000FF;"><tr><td>table-3</td></tr></table></td>
</tr><tr>
<td><table class="cntrtable" style="width: 50%; margin-left: auto; margin-right: auto; background-color: #FF00FF;"><tr><td>table-4</td></tr></table></td>
</tr>
</table>
</body>
</html>
If I large my browser then my div header width don’t show 100%. But I set my div header width 100%. Please can someone point out what I may be doing wrong here? Many thanks. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome Page</title>
<link rel="shortcut icon" href="image/icon.ico" >
<link rel="StyleSheet" href="style/login.css" type="text/css"/>
</head>
<body>
<div id="header">
<div id="header_contain">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" style="font-size: 18pt; font-weight: bold">Hello</td>
<td width="50%" align="right" style="font-size: 18pt; font-weight: bold">What's Up!</td>
</tr>
</table>
</div>
</div>
</body>
</html>
css code
body
{
margin: 0px;
padding: 0px;
font-family: arial, helvetica, sans-serif;
font-size:10pt;
}
#header
{
width: 100%;
height: 85px;
background: #006666;
}
#header_contain
{
color: white;
width: 980px;
height: auto;
margin: 0px auto;
padding-top: 30px;
}
You would need to set every element above the <div> to 100% width, including the <html> tag.
I have edited my code and its tested.
HTML Code:
<div id="header" style="width:1500px;">
<div id="header_contain" style="min-width:980px;">
<table>
<tr>
<td>
<div style="width:500px;">
Hie, Div1 Content Here.!!
</div>
</td>
<td>
<div style="width:500px;">
Hie, Div2 Content Here.!!
</div>
</td>
<td>
<div style="width:500px;">
Hie, Div3 Content Here.!!
</div>
</td>
</tr>
</table>
</div>
</div>
CSS Code..something like this.
html, body
{
height: 100%;
margin: 0px;
padding: 0px;
font-family: arial, helvetica, sans-serif;
font-size:10pt;
overflow:auto;
}
#header
{
height: 85px;
background: #006666;
}
#header_contain
{
color: white;
height: auto;
margin: 0px auto;
padding-top: 30px;
}
If It will helps you then don't forget to improve your accept rates. Cheers. !!
#header
width: 100%;
height: 85px;
background: #006666;
position:fixed;
z-index:999;
top:0;}
I use same color on header_contain div that I have already used in head div and this way I solve this problem.
#header
{
width: 100%;
height: 85px;
background: #006666;
}
#header_contain
{
color: white;
width: 980px;
height: 85px;
background: #006666;
margin: 0px auto;
padding-top: 30px;
}