Inline Placard Popup: Easy to use popup for messages and content in webpages.

Purpose
The inline placard popup was put together to allow you to have a popup pane that is inline to its parent container and resizes itself dynamically to match the size of the parent. The most likely use of the placard is with table-based content with several columns are displayed where some column content may be incredibly large. In that scenario, you can limit what is shown in the column and provide a link which will bring up a pane that will show all the content.

It fairly simple and even works with the datatables library. Try the demo below and if you like it then feel free to get the source code also included below.

Demo

Col 1	Col 2	Col 3	Col 4	Col 5	Col 6
Value 1	Value 2	Value 3 Value 3 Value 3 Value 3 Value 3 Value 3	Value 4	Value 5	Really lengthy content really lengthy content really lengthy content really lengthy content really lengthy content really lengthy content really lengthy content really lengthy content really lengthy content really lengthy content really lengthy content really lengthy content really lengthy content really lengthy content. ⇛

Source Code (CSS)

<style type="text/css">
.td-column-align {
	text-align: left;
	vertical-align: top;
}
.th-column-font {
	text-align: left;
	vertical-align: top;
	font-weight: bold;
}
/* Placard */
.pl-source-container {
	position: inherit;
	width: 100%;
	z-index: 100;
}
.pl-source {
	display: inline-flex;
	z-index: 100;
	width: 200px;
	height: inherit;
	padding: 2px;
	border-style: solid;
	border-width: 1px;
	border-color: darkgrey;
	overflow-y: hidden;
	overflow-x: auto;
	white-space: nowrap;
}
.pl-action-container {
	display: inline-flex;
	z-index: 100;
	width: 10px;
}
.pl-btn-hover:hover {
	color: red;
}
.pl-btn-default {
	font-size: .75em;
	cursor: pointer;
}
.pl-msg-container {
	position: absolute;
	z-index: 200;
	visibility: hidden;
	border-radius: 5px;
	box-shadow: 2px 2px 1px 1px rgba(169, 169, 169, 0.5);
	margin-left: -615px;
	margin-top: -3px;
	width: 815px;
	height: 0px;
	padding: 2px;
	border-style: solid;
	border-width: 1px;
	border-color: #a9a9a9;
	background-color: #f8f9fa;
	overflow-y: auto;
	overflow-x: hidden;
}
</style>

Source Code (Javascript)

<script language="javascript" type="text/javascript">
	let symbolExpand = "&#8667;";
	let symbolCollapse = "&#8666;";
	let placardDropShadow = 2;
	let placardParent = "placardParent";
	let placardSource = "placardSource";
	let placardVeranda = "placardMessage";
	function placardState(id) {
		try {
			let pID = id.split("_")[1];
			let parentId = placardParent.concat("_", pID);
			let parentHeight = document.getElementById(parentId).clientHeight;
			let pDest = document.getElementById(placardVeranda.concat("_", pID));
			let pState = "&#".concat(document.getElementById(id).innerText.charCodeAt(), ";");
			if (pState == symbolExpand) {
				let pMsg = document.getElementById(placardSource.concat("_", pID)).innerText;
				let pCollapse = symbolCollapse.replace("&#", "").replace(";", "");
				let pHeight = new String().concat((parentHeight - placardDropShadow).toString(), "px");
				pDest.innerText = pMsg; pDest.style.height = pHeight; pDest.style.visibility = "visible";
				document.getElementById(id).innerText = String.fromCharCode(pCollapse);
			}
			else {
				let pExpand = symbolExpand.replace("&#", "").replace(";", "");
				pDest.style.visibility = "hidden"; pDest.innerText = "";
				document.getElementById(id).innerText = String.fromCharCode(pExpand);
			}
		}
		catch (err) {
			alert("Placard settings are incorrect");
		}
	}
</script>

Source Code (HTML)

<table style="width: 900px;">
	<thead>
		<tr>
			<th class="th-column-font" style="width: 50px;">Col 1</th>
			<th class="th-column-font" style="width: 50px;">Col 2</th>
			<th class="th-column-font" style="width: 50px;">Col 3</th>
			<th class="th-column-font" style="width: 250px;">Col 4</th>
			<th class="th-column-font" style="width: 250px;">Col 5</th>
			<th class="th-column-font" style="width: 250px;">Col 6</th>
		</tr>
	</thead>
	<tbody>
		<tr id="placardParent_1">
			<td class="td-column-align">Value 1</td>
			<td class="td-column-align">Value 2</td>
			<td class="td-column-align">Value 3 Value 3 Value 3 Value 3 Value 3 Value 3</td>
			<td class="td-column-align">Value 4</td>
			<td class="td-column-align">Value 5</td>
			<td class="td-column-align">
				<div id="placardMessage_1" class="pl-msg-container"></div>
				<div class="pl-source-container">
					<div id="placardSource_1" class="pl-source">
						Really lengthy content really lengthy content really lengthy content really lengthy content really lengthy content 
really lengthy content really lengthy content really lengthy content really lengthy content really lengthy content really lengthy content really lengthy 
content really lengthy content really lengthy content.
					</div>
					<div class="pl-action-container">
						<span id="placardAction_1" class="pl-btn-default pl-btn-hover" title="Click to Expand / Collapse" 
onclick="javascript:placardState(this.id);">&#8667;</span>
					</div>
				</div>
			</td>
		</tr>
	</tbody>
</table>