Tool Tips: Magic JavaScript

Usage

Add data-mjf="tool_tip" data-mjf_tt_id="ELEMENT_CONTENT_ID" id="ELEMENT_ID" to your hover tag.

Add class="tool_tip_cont" id="ELEMENT_CONTENT_ID" to your tag that contains the tool tip itself.

Add <script type="text/javascript">$m.wand.tool_tip = true;</script> inside your <body> tag.

Create a CSS style rule based ELEMENT_CONTENT_ID or possibly a CSS class for your tool tip collection for visual appeal. Only minimal styling is applied to ensure separation of design and functionality.

Example

Hover over the image on the right Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<style type="text/css"> #tool_tip_ex_content_id { background-color:#FFFFCC; border:2px solid #EEEEBB; color:#000000; margin-left:20px; } </style> <p> Hover over the image on the right <img src="../../images/icons/icon_question_sign.png" data-mjf="tool_tip" data-mjf_tt_id="tool_tip_ex_content_id" id="tool_tip_ex_id" alt=""> <span class="tool_tip_cont" id="tool_tip_ex_content_id">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> </p>

« Back to the main documentation