Template:ElementTooltip
Description
With minimal code, this Template adds a picture with link in the same fashion as {{Pic}}, additionally it removes the regular hovertext and adds an infobox when the cursor hovers over the text.
Syntax
Simply place {{ElementTooltip |Elementname}}, or {{ElementTooltip |Elementname |Display text}} onto a page. It is possible to suppress the picture by using {{ElementTooltip |Elementname |showPic = no}}
Examples
The Tooltip for Elements like {{ElementTooltip |Copper}} for 
Copper 
, also in it's drinkable 
and breathable Form , can easily be inserted into any Paragraph. This should work for all Elements, even those that split into multiple elements on phase Transition such as 
Salt Water 
. Further Examples for this Tempalte are 
Regolith 
who notable changes in SHC upon phase change, or 
Natural Gas 
whose element ID is actually Methane, while Methane 
itself is correctly recognized as the liquid version. Water does not show the Pic
Upon Failure to provide the proper elementname like 
Steam Turbine (which is a Building, not an element) the Text will be displayed normally, but no special Tooltip.
Explanation
The contents of the Infobox is fetched with the Lua module ElementTooltip, which returns the data as a <span> with data attributes such as data-specificheatcapacity="4.179" or data-caption="(CO--2--) Carbon Dioxide is an atomically heavy chemical compound in a Gaseous state.\nIt tends to sink below other gases."
The styling for this template can be found in a /styles.css subpage.
The Gadget Advanced Tooltip reads the data-* attributes on the <span> (which was provided with Lua), and replaces the entire span with an infobox-like structure like shown below.
| example html of infobox-like structure |
<div class="advanced-tooltip--content element-tooltip--content"">
<h2>Copper</h2>
<div class="element-tooltip--caption">
(Cu) Copper is a conductive Metal. It is suitable for building Power systems.
</div>
<div class="element-tooltip--row">
<div class="element-tooltip--label">
Specific Heat Capacity
</div>
<div class="element-tooltip--data">
0.385(DTU/g)/°C
</div>
</div>
<div class="element-tooltip--row">
<div class="element-tooltip--label">
Thermal Conductivity
</div>
<div class="element-tooltip--data">
60(DTU/(m*s))/°C
</div>
</div>
<div class="element-tooltip--row">
<div class="element-tooltip--label">
Hardness
</div>
<div class="element-tooltip--data">
25 (Firm)
</div>
</div>
<div class="element-tooltip--row">
<div class="element-tooltip--label">
Max Mass
</div>
<div class="element-tooltip--data">
3870kg
</div>
</div>
<div class="element-tooltip--row">
<div class="element-tooltip--label">
at 1083.85°C melts into
</div>
<div class="element-tooltip--data">
Liquid Copper(SHC: 0.386)
</div>
</div>
</div>
|