I am currently having two main currencies for my business. The product page is actually built using HTML. I have 4 products in a page and I want to display two prices for each product, like if someone selects USD, cost in USD will be displayed and if someone selects EUR then it'll show the price accordingly, without reloading the page. I also want the order link to be changed upon selecting the currency.
Please I don't want to convert the currency. I just want to store two different price values for each product and display it accordingly when user changes the currency.
It's NOT any CMS based or eCommerce website, just few HTML pages. I think it's it can be done using JS but I am not a programmer :/
Would anyone please tell me how to do it? I need a very simple program but I have no idea where to start.
Here's product pricing section HTML source code-
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Website Hosting | Host Hub</title>
<!--Favicon-->
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png"/>
<!--Libraries-->
<link rel="stylesheet" type="text/css" href="assets/libraries/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/libraries/font-awesome/css/all.min.css">
<link rel="stylesheet" type="text/css" href="assets/libraries/animate/animate.min.css">
<!--Google Fonts-->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Overlock:400,400italic,700,700italic,900,900italic">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Signika:300,400,600,700">
<!--Styles-->
<link rel="stylesheet" type="text/css" href="assets/css/style.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/mobile.min.css">
<!--Custom CSS-->
<link rel="stylesheet" type="text/css" href="assets/css/custom.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--Begin Header-->
<div class="topbar">
<div class="container">
<div class="row">
<!--Begin Social Icons-->
<div class="col-xl-4 col-lg-4 col-md-3 col-sm-3 col-12 social">
<div class="link"><i class="fab fa-facebook"></i></div>
<div class="link"><i class="fab fa-twitter-square"></i></div>
<div class="link"><i class="fab fa-youtube-square"></i></div>
<div class="link"><i class="fab fa-skype"></i></div>
</div>
<!--End Social Icons-->
<!--Begin Client Links-->
<div class="col-xl-8 col-lg-8 col-md-9 col-sm-9 col-12 text-right client">
<div class="link xshide"><i class="fas fa-coins"></i>$ USD</div>
<div class="link xshide"><i class="fas fa-globe"></i>Language</div>
<div class="link"><i class="fas fa-lock"></i>Customers</div>
<div class="link"><i class="fas fa-life-ring"></i>Support</div>
<div class="link"><i class="fas fa-shopping-cart"></i><span class="desktop">View Cart</span> (0)</div>
</div>
<!--End Client Links-->
</div>
</div>
</div>
<!--End Header-->
<!--Begin Web Hosting-->
<div class="webhosting">
<div class="container">
<div class="row">
<!--Begin Plan Box-->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 wow zoomInDown">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Micro Hub</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1> $2<span class="subscript">.99</span></h1>
<small>Per Month</small> </div>
<table class="table">
<tr>
<td>1 GB Storage</td>
</tr>
<tr>
<td>10 GB Bandwidth</td>
</tr>
<tr>
<td>Unlimited Email</td>
</tr>
<tr>
<td>Unlimited Databases</td>
</tr>
<tr>
<td>Unlimited FTP Accounts</td>
</tr>
<tr>
<td><img alt="" src="assets/img/hosting/website-hosting/cpanel.png" srcset="assets/img-retina/hosting/website-hosting/cpanel#2x.png 2x" class="img-fluid" /></td>
</tr>
</table>
</div>
<a href="#">
<div class="panel-footer">Order Today</div>
</a> </div>
</div>
<!--End Plan Box-->
<!--Begin Plan Box-->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 wow zoomInDown" data-wow-delay="0.2s">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Small Hub</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1> $7<span class="subscript">.99</span></h1>
<small>Per Month</small> </div>
<table class="table">
<tr>
<td>10 GB Storage</td>
</tr>
<tr>
<td>100 GB Bandwidth</td>
</tr>
<tr>
<td>Unlimited Email</td>
</tr>
<tr>
<td>Unlimited Databases</td>
</tr>
<tr>
<td>Unlimited FTP Accounts</td>
</tr>
<tr>
<td><img alt="" src="assets/img/hosting/website-hosting/cpanel.png" srcset="assets/img-retina/hosting/website-hosting/cpanel#2x.png 2x" class="img-fluid" /></td>
</tr>
</table>
</div>
<a href="#">
<div class="panel-footer">Order Today</div>
</a> </div>
</div>
<!--End Plan Box-->
<!--Begin Plan Box-->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 wow zoomInDown" data-wow-delay="0.4s">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Big Hub</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1> $9<span class="subscript">.99</span></h1>
<small>Per Month</small> </div>
<table class="table">
<tr>
<td>20 GB Storage</td>
</tr>
<tr>
<td>200 GB Bandwidth</td>
</tr>
<tr>
<td>Unlimited Email</td>
</tr>
<tr>
<td>Unlimited Databases</td>
</tr>
<tr>
<td>Unlimited FTP Accounts</td>
</tr>
<tr>
<td><img alt="" src="assets/img/hosting/website-hosting/cpanel.png" srcset="assets/img-retina/hosting/website-hosting/cpanel#2x.png 2x" class="img-fluid" /></td>
</tr>
</table>
</div>
<a href="#">
<div class="panel-footer">Order Today</div>
</a> </div>
</div>
<!--End Plan Box-->
</div></div></div>
<!--Libraries-->
<script src="assets/libraries/jquery/jquery.min.js"></script>
<script src="assets/libraries/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/libraries/jquery-ui/jquery-ui.min.js"></script>
<script src="assets/libraries/wow/wow.min.js"></script>
<script src="assets/libraries/zumada/sticky-header.min.js"></script>
<script src="assets/libraries/zumada/dropdown-menu.min.js"></script>
<script src="assets/libraries/zumada/price-slider-6-plans.min.js"></script>
<script src="assets/libraries/zumada/scroll-to-top.min.js"></script>
<script src="assets/libraries/zumada/countdown.min.js"></script>
<!--Custom Scripts-->
<script src="assets/js/scripts.js"></script>
</body>
</html>
I was not patient enough to wait for your HTML and simply built this "mvce" (minimum viable and complete example).
There are many ways of providing the two prices. I chose the way via the data attribute in the price <td>s.
const tbl=document.querySelector("table");
let cur=0; // possible values: 0 and 1
const change=()=>{
tbl.querySelectorAll(".price").forEach(td=>td.textContent=td.dataset.pr.split(" ")[cur]);
cur=1-cur;
}
document.querySelector("button").onclick=change;
change()
.price {text-align:right}
<table>
<tr><th>nr</th><th>Fruit</th><th>Price</th></tr>
<tr><td>1</td><td>Apple</td><td class="price" data-pr="1€ 1.2$"></td></tr>
<tr><td>2</td><td>Orange</td><td class="price" data-pr="10€ 12$"></td></tr>
<tr><td>3</td><td>Banana</td><td class="price" data-pr="2€ 2.4$"></td></tr>
<tr><td>4</td><td>Pineapple</td><td class="price" data-pr="5€ 6$"></td></tr>
<tr><td>5</td><td>Apricot</td><td class="price" data-pr="7€ 8.3$"></td></tr>
<tr><td>6</td><td>Pear</td><td class="price" data-pr="3€ 3.6$"></td></tr>
</table>
<button>change currency</button>
And here is another sample, based on your HTML (I added the `data-pr="24.95 20.80" attributes):
let cur=1;
document.querySelector("button").onclick=()=>{
document.querySelectorAll(".the-price h1").forEach(h=>{
let p=h.dataset.pr.split(" ")[cur].split(".");
h.innerHTML=['$','€'][cur]+p[0]+'<span class="subscript">.'+p[1]+'/m</span>';
});
cur=1-cur;
}
.subscript {font-size:1ex}
<div class="webhosting">
<div class="container">
<div class="row">
<!--Begin Plan Box-->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 wowzoomInDown">
<div class="panel">
<div class="panel-heading" style="background: #03989e">
<a name="pricing"></a>
<h3 class="panel-title">NVMe-1</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1 data-pr="11.95 9.50"> $11<span class="subscript">.95/m</span></h1>
<small>Per Monthly</small> </div>
<table class="table">
<tr>
<td>Product Description 1</td>
</tr>
<tr>
<td>Product Description 2</td>
</tr>
</table>
</div>
<a href="{$WEB_ROOT}/cart.php?a=add&pid=77">
<div class="panel-footer">GET STARTED TODAY</div>
</a> </div>
</div>
<!--End Plan Box-->
<!--Begin Plan Box-->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 wowzoomInDown" data-wow-delay="0.2s">
<div class="panel">
<div class="panel-heading" style="background: #38b6ff ">
<h3 class="panel-title">NVMe-2</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1 data-pr="24.95 20.80"> $24<span class="subscript">.95/m</span></h1>
<small>Per Monthly</small> </div>
<table class="table">
<tr>
<td>Product Description 1</td>
</tr>
<tr>
<td>Product Description 2</td>
</tr>
</table>
</div>
<a href="{$WEB_ROOT}/cart.php?a=add&pid=78">
<div class="panel-footer">GET STARTED TODAY</div>
</a> </div>
</div>
<!--End Plan Box-->
</div>
</div>
</div>
<button>change currency</button>
You can do this easily by using Javascript. You can store the pricing in a JS function and return the actual amount stored when currency is changed without reloading the page.
If I could see your page source code, I would be able to help you resolve this better.
HTML/CSS Solution
No JavaScript Needed
Points to Consider Before Saying, "It Doesn't Work"
The OP (Original Post) had too much HTML to be considered very useful. A typical Bootstrap layout consists of <div>s heavily burdened by BS (Bootstrap) classes wrapped around more of the same.
The majority of the HTML is removed and only what is needed has been replaced by more semantic elements. Most importantly, the interactive element <a> was replaced by a <input type='checkbox' hidden> and a <label>. There are a few good reasons for this particular change:
Checkboxes are in one of two states checked = true or checked = false. The CSS pseudo-class :checked will change the style of the <label>, and all of the <figure> following it as well as the <sup> nested within each <figure>. When in default, (checked = false) everything is USD and when checked is changed to EUR.
Ascetically, the <label> can be styled to look like a <button>, <a>, etc. and the checkbox is actually has the hidden attribute. Since the checkbox has id='currency' and the <label> has for='currency' any click to the <label> is a click to the checkbox as well (and vise versa although it doesn't matter in this case since the checkbox is hidden).
Important: The HTML layout should not be altered in a way wherein one or more elements are placed between checkbox and <label> or inserted into any <figure>. There shouldn't be a problem about adding anything around, ahead, or behind them.
All <link> (except the Google Fonts) pointed to relative paths (ex. href='/path/to/style.css') making them useless. I added the BS classes have styles that have a high specificity that can't be overridden easily. I added the BS CSS and then doubled up the classes of the custom CSS to increase their specificity in order to override BS CSS.
Important: The only thing that can be changed are the name of the classes and any CSS property/value with one exception which is content:. If the CSS is placed in a file (ex. style.css), make sure the CSS rule sets are the last ones. If placed in a <style>, make sure the CSS rule sets are the last ones.
The dynamically changing text relies on the following:
:checked + label::before changes {content: '💲USD';... to '\a0€ EUR'
:checked ~ figure::before changes {content: '💲'attr(data-usd)... to €attr(data-eur) for all <figure>s that follow the checkbox.
:checked ~ figure > sup::before changes {content: '.'attr(data-usd)... to '.'attr(data-eur) for all <sup>
Since there's no JavaScript involved, the values are stored on each <figure> and <sup> data-usd and data-eur attributes and must be manually edited (which is what OP requested if I recall)
:checked ~ figure::before {content: '€\a0'attr(data-eur);...}
<input type='checkbox' checked hidden>
<label>€ EUR</label>
...
<figure data-usd='9' data-eur='12'>
€ 12<sup data-usd='99' data-eur='33'>.33</sup>
</figure>
label.money.money {
font-size: 2.5ch;
font-weight: 700;
line-height: 1;
cursor: pointer;
}
label.money.money::before {
content: '💲USD';
}
#currency:checked+label.money.money::before {
content: '\a0€ EUR';
}
figure.price.price {
width: max-content;
font-size: 4.75ch;
font-weight: 500;
line-height: 1.33;
}
figcaption.caption.caption {
width: 100%;
font-size: 0.3em;
padding: 0 0 0 1.5em;
}
sup.cents.cents {
vertical-align: middle;
font-size: 0.6em;
line-height: 0.7;
margin-left: -.75ch;
}
figure.price.price::before {
content: '💲'attr(data-usd);
}
sup.cents.cents::before {
content: '.'attr(data-usd);
}
#currency:checked~figure.price.price::before {
content: '€\a0'attr(data-eur);
padding-left: 0.3em;
}
#currency:checked~.price>sup.cents.cents::before {
content: '.'attr(data-eur);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<input id='currency' class='btn-click' type='checkbox' hidden>
<label class='money btn btn-link btn-lg' for='currency'></label>
<figure class='price' data-usd='2' data-eur='4'>
<sup class='cents' data-usd='99' data-eur='33'></sup>
<figcaption class='caption'>Per Month</figcaption>
</figure>
<figure class='price' data-usd='7' data-eur='13'>
<sup class='cents' data-usd='99' data-eur='33'></sup>
<figcaption class='caption'>Per Month</figcaption>
</figure>
<figure class='price' data-usd='9' data-eur='16'>
<sup class='cents' data-usd='99' data-eur='33'></sup>
<figcaption class='caption'>Per Month</figcaption>
</figure>
</body>
</html>
Related
I have a grid menu with specific css styling, and I want to convert that grid to a table so i can use jquery datatable, but i didn't know how
here is an item of my grid :
<div class="row menu-filter-items">
<div class="col-md-4 margin-b-30 menu-item">
<a href="#" class="menu-grid">
<img src="images/restolist.png" alt="" class="img-fluid"/>
<div class="menu-grid-desc">
<!-- <span class="price float-right">$9.50</span> -->
<h4 class="a" id="title">BB</h4>
<p>
Description
</p>
</div>
</a>
</div>
what would it be as an element of a <td> in a table ?
DataTables can integrate seamlessly with Bootstrap 3 using Bootstrap's table styling options to present an interface with a uniform design, based on Bootstrap.
This integration is done simply by including the DataTables Bootstrap files (CSS and JS) which will set the defaults needed for DataTables to be initialized as normal.
Source: datatables.net
Example of Provided Code has Bootstrap Table
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Table Use Sample -->
<div class="container">
<table class="table">
<tr>
<td>
<a href="#">
<img src="http://via.placeholder.com/140x100" alt="" class="img-fluid"/>
</a>
</td>
</tr>
<tr>
<td>
<h4>BB</h4>
</td>
</tr>
<tr>
<td>
<p>
Description
</p>
</td>
</tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Wasn't sure how exactly you wanted the table formatted from the code you provided, but you get the idea.
Hope that helps.
My intention is to align the boxplot with the textual content.
Here is the page of my BOXPLOT visualization
The following is the html code that makes the page appear, where the visulization is represented by the id boxplot. Demo.
I can invert the visualization but I cannot align it with the textual content. I looked up the bootstrap settings and placed it in different locations, but it always ended up coming in front of the text. I am not well-versed with css styling. Can anybody help?
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script><script src="https://code.highcharts.com/modules/exporting.js"></script>
<div class="container">
<h1>Where's the plag?</h1>
<div class="jumbotron">
<small>
<p>Atom Type: paragraph </p>
<p>Cluster Method: kmeans </p>
<p>k: 2 </p>
Stylistic Feature(s):
<p>honore_r_measure </p>
<p></p>
</small>
<br>
<div id='chart' style="height: 300px; width: 20000px"></div>
<br>
<button type="button" class="btn btn-primary btn-sm" data-toggle="collapse" data-target="#full_table">
Hide/Show Table
</button>
<div class="row collapse in" id="full_table">
<div class="col-md-9">
<div class="table-responsive" style="font-size:12px;">
<table class="table table-condensed table-scrollable table-bordered">
<thead>
<tr>
<th>Start Index</th>
<th>honore_r_measure</th>
<th>Suspicion Score</th>
</tr>
</thead>
<tbody>
<tr class="passage_starting_at_">
<td class="passage_row"> 0</td>
<td class="passage_row"> 2512.6585</td>
<td class="passage_row">0.0000</td>
</tr>
<tr class="passage_starting_at_">
<td class="passage_row"> 196</td>
<td class="passage_row"> 2115.8163</td>
<td class="passage_row" bgcolor=#F60C0C> 1.0000</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row">
<br class="col-md-9">
<div class="panel panel-default">
<!-- Change the id of the following div to either column or boxplot, whichever is required-->
<div id="boxplot" style="height: 300px; width: 750px"></div>
<div class="panel-heading">
easy_source
</div>
<div class="panel-body" id="document_content">
<p>
<div class="passage" features="<p>Span</p><p>0, 194</p><hr size = "10"<p>Plag. conf.</p><p>0.0</p><hr size = "10"<p>PLAG SPAN</p><p>No plag!</p><hr size = "10"<p>honore_r_measure</p><p>2512.6585</p><hr size = "10""
style="font-size:14px;display:inline;;color:rgb(0,0,0);" id='pass0'>
This is a really short source that isn't all that super exciting. It should have some nice fingerprints that hopefully match its plagiarized copy which is named easy_test.txt. Pretty cool stuff.
</div>
<br/>
<div class="passage" features="<p>Span</p><p>196, 379</p><hr size = "10"<p>Plag. conf.</p><p>1.0</p><hr size = "10"<p>PLAG SPAN</p><p>No plag!</p><hr size = "10"<p>honore_r_measure</p><p>2115.8163</p><hr size = "10""
style="font-size:14px;display:inline;color:rgb(255,0,0);" id='pass1'>
It also has another couple of lines which are not in the test document but are also here and are very exciting. This will make jaccard similarity not quite 1.0 but probably about 0.6.
</div>
<br/>
</div>
</div>
</div>
</div>
basically, I want the diagram to be like this
I have a table with 2 columns and 2 rows like this
I would like to make the elements of the first column clickable and when one clicks on it, it appears another table under that row.
I thought of adding an href but this doesnt work:
<font face="Arial, Helvetica, Geneva">
<table id="tableInfo" data-role=table class="ui-responsive" width="100%">
<tbody>
<tr>
<a href=#info1 >
<table id="tableInfoNested1" data-role=table class="ui-responsive" width="100%">
<tbody>
<tr>Address</tr>
<tr>City</tr>
</tbody>
</table>
Name
</a>
</tr>
<tr>
<a href=#info2 >
<table id="tableInfoNested2" data-role=table class="ui-responsive" width="100%">
<tbody>
<tr>Test</tr>
<tr>Test</tr>
</tbody>
</table>
Code
</a>
</tr>
</tbody>
</table>
</font>
Try this...
<a id="LogicLink" onclick="Table1();" href="#">Name</a>
<table id="TableNested1" style="display:none">
<tr><td>Adresss<td/><tr/>
<tr><td>City<td/><tr/>
<table/>
<br/>
<a id="Link" onclick="Table2();" href="#">Code</a>
<table id="TableNested2" style="display:none">
<tr><td>Test<td/><tr/>
<tr><td>Test<td/><tr/>
</table>
function Table1()
{
var elem=document.getElementById("TableNested1");
var hide = elem.style.display =="none";
if (hide) {
elem.style.display="table";
}
else {
elem.style.display="none";
}
}
function Table2()
{
var elem=document.getElementById("TableNested2");
var hide = elem.style.display =="none";
if (hide) {
elem.style.display="table";
}
else {
elem.style.display="none";
}
}
http://jsfiddle.net/Wfxpu/180/
Have a look at this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Collapsible Lists</h1>
</div>
<div data-role="main" class="ui-content">
<h2>My Phonebook</h2>
<div data-role="collapsible">
<h4>A</h4>
<ul data-role="listview">
<li>Adele</li>
<li>Agnes</li>
</ul>
</div>
<div data-role="collapsible">
<h4>B</h4>
<ul data-role="listview">
<li>Billy</li>
<li>Bob</li>
</ul>
</div>
<div data-role="collapsible">
<h4>C</h4>
<ul data-role="listview">
<li>Calvin</li>
<li>Cameron</li>
<li>Chloe</li>
<li>Christina</li>
</ul>
</div>
</div>
<div data-role="footer">
<h1>Insert Footer Text Here</h1>
</div>
</div>
</body>
</html>
http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_lists_collapsible
OR
http://jasalguero.com/ledld/development/web/expandable-list/
You will have to apply the same principle to your table
I'm trying to add html tool-tips to an existing page that's made of a table on one side of the page and something else on the other. I want to add the tool-tip to each td in the table.
With the tool-tip added to each td every time I hover over a td the whole table shifts over one cell!
Also, tried only on chrome.
before the hover
And when I hover over the first td
Below is a cut down, but fully working example of the oddness, any thoughts appreciated.
<!DOCTYPE html>
<html>
<head lang="en">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="shortcut icon" href="static/img/favicon.ico" type="image/x-icon" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="table-responsive" id="23">
<TABLE class="table table-bordered table-nonfluid">
<tr id="hdr" class="bg-primary h5">
<th class="text-center">Mon 18 May</th>
<th class="text-center">Thu 21 May</th>
</tr>
<tr id="day" class="text-center">
<td class="bg-danger"
data-trigger="hover"
data-placement="auto"
data-html="true"
data-title="<div>WHAT!</div>"
data-toggle="tooltip"
>
<sup>300</sup>/<sub>312</sub>
</td>
<td class="bg-danger"
data-trigger="hover"
data-placement="auto"
data-html="true"
data-title="<div>WHAT!</div>"
data-toggle="tooltip"
>
<sup>277</sup>/<sub>312</sub></td>
</tr>
</TABLE>
</div>
</div>
<div class="col-md-6 " style="padding-top: 16px;">
<blockquote id="comment_txt">before, after and then on</blockquote>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$( document ).ready(function() {
$('[data-toggle="tooltip"]').tooltip()
});
</script>
</body>
</html>
I suggest to wrap the content of your td inside a span like this
<td><span data-trigger="hover" style="display:block"
data-placement="auto"
data-html="true"
data-title="<div>WHAT!</div>"
data-toggle="tooltip"><sup>300</sup>/<sub>312</sub></span></td>
Is never a good idea using the tooltips directly on a table element.
Well this is a weird issue actually. Never realised it until now. This might not be the perfect fix but a temporary fix will be to place a span around the text in the td for the one on the left and for the td on the right leave it as it is right now because it works fine only the left one causes this issue.
Bootply Link right here
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="table-responsive" id="23">
<TABLE class="table table-bordered table-nonfluid">
<tr id="hdr" class="bg-primary h5">
<th class="text-center">Mon 18 May</th>
<th class="text-center">Thu 21 May</th>
</tr>
<tr id="day" class="text-center">
<td class="bg-danger" >
<span data-trigger="hover"
data-placement="auto"
data-html="true"
data-title="WHAT!"
data-toggle="tooltip">
<sup>300</sup>/<sub>312</sub>
</span>
</td>
<td class="bg-danger"
data-trigger="hover"
data-placement="auto"
data-html="true"
data-title="<div>WHAT!</div>"
data-toggle="tooltip"
>
<sup>277</sup>/<sub>312</sub></td>
</tr>
<tr id="day" class="text-center">
<td class="bg-danger" >
<span data-trigger="hover"
data-placement="auto"
data-html="true"
data-title="WHAT!"
data-toggle="tooltip">
<sup>300</sup>/<sub>312</sub>
</span>
</td>
<td class="bg-danger"
data-trigger="hover"
data-placement="auto"
data-html="true"
data-title="<div>WHAT!</div>"
data-toggle="tooltip"
>
<sup>277</sup>/<sub>312</sub></td>
</tr>
</TABLE>
</div>
</div>
<div class="col-md-6 " style="padding-top: 16px;">
<blockquote id="comment_txt">before, after and then on</blockquote>
</div>
</div>
</div>
The problem with my fix is simple. The tooltip will only show on the left td if you hover on the text in the cell not on the table-cell itself whilst the tooltip will show if you hover on the table cell on the right. bad for user experience I know but this is as i said a temporary fix.
Below is a content which is usually generated dynamically. In the main part of the page there is a <div class="span6"> . Sometimes the Table in this div becomes wider than the div itself (I ve checked the css, the width is set to 100%) . If I only put short text into the table, or if i make the div wider everything is fine.
The Questions are:
Why can a table become wider than div class=spanX? I always thought, a block element takes the width of its parent?
The number of characters/spaces in the respective td of the table can vary. How do I prevent the table from growing wider than the div? Of course I can dynamically check for the number of characters in a ts but what do i do with this information?
http://jsfiddle.net/vNnc6/
The HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>MySite</title>
<meta name="author" content="me"/>
<link href="static/css/bootstrap.css" rel="stylesheet">
<link href="static/css/bootstrap-responsive.css" rel="stylesheet">
<link href="static/profhase.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="static/bootstrap/js/bootstrap.js"></script>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<ul class="nav">
<li><a class="brand" href="profhase">MyBrand</a></li>
<li>Home</li>
<li>About</li>
<li>Blog</li>
</ul>
<div class="nav pull-right collapse nav-collapse" style="hight: 0px">
<ul class="nav collapse nav-collapse">
<li><p class="navbar-text">Apps: </p></li>
<li>AppOne <i class="icon-lock"></i></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="span2">
<p>
My Wonderful sidebar
</p>
</div>
<div class="span6" style="background:red;">
<table class="table">
<tbody>
<tr>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
<th>Header5</th>
<th>Header6</th>
</tr>
<tr>
<td>My first Test</td>
<td>My second Test</td>
<td>My third Test</td>
<td>My fifth Test</td>
<td>My lalalalalong long lelong long long Test</td>
<td>
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown">
Dropdown Choices <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a id=1>First wonderful choice</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
Thanks to the answer by FelipeAls this code did it:
table {
table-layout: fixed;
word-wrap: break-word;
}
Another possibility is not to use word wrap but having something like
...
http://jsfiddle.net/zzmfA/
I noticed the parent of span6 is displayed as table but span6 is floating. Removing the float and setting the span* to display: table-cell works: fiddle
Note: there may have a more suitable class than span* in TB, a class which already has display: table-cell.
Other solution, but probably not what you want to achieve: the technique of "an element with overflow: hidden; alongside a floating element": Working fiddle
The explanation of this magic is named block formatting context (T. J. Koblentz' blog) - question on SO