eARNING TRICK: Hover text

This article is about putting a "tooltip" (text that is shown when you hover over) into something (eg text, a web-address or even a picture) in a Blogger post or gadget. <div style="clear: both;"></div><a name="more"></a><h2>What are tooltips?</h2><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj600NDKxQaxi2Pz0DJG1jKJ4iUnFUI2Tj9PbVgyJsKeG47XhQ1PSGIC1xZIjL0WT-p6jgslULgfSZIr75XW_JY4u52jrfDWi5iI3o0sZOJg0f4_U_CbrXMxKk5VtmnWJSRIqOT5ywEeyqK/s437/tooltips-text-that-floats-over-text-pictures-urls-definitions-in-blogger-posts.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="273" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj600NDKxQaxi2Pz0DJG1jKJ4iUnFUI2Tj9PbVgyJsKeG47XhQ1PSGIC1xZIjL0WT-p6jgslULgfSZIr75XW_JY4u52jrfDWi5iI3o0sZOJg0f4_U_CbrXMxKk5VtmnWJSRIqOT5ywEeyqK/s320/tooltips-text-that-floats-over-text-pictures-urls-definitions-in-blogger-posts.png" width="320" /></a></div>Tooltips are a feature found in many websites and modern computer based software:  when a viewer hovers their mouse over an item, a small piece of text is shown, generally formatted in a box which is highlighted in some way. They can be used for all sorts of things, to provide definitions of technical or foreign-language words, additional information about particularly interesting concepts - or as an incentive or invitation to take an action  eg you could tool-tip "click here to enter" with a description of the prize or benefits of entering.) You can see them in Blogger's Post Editor when you put your mouse over an item in the toolbar. <div class="separator" style="clear: both; text-align: center;"><img border="0" height="288" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKQroOsDuMo31gMoP22kCrhEutj9LRQDoqcbhHvXG1T5VGuWr_NNID2x4ITbqtf3OMp4r5JxM6Sd0MJ8-EYS51peBjgY7KCEjhc7eug5_fIcFR_KWPVs1Nt3bvqrFtuju0R94tWbZ2Lx-Y/" width="400" /></div> <div style="text-align: left;">But tool-tips can be used on other things too, including pictures and text: put your mouse over <a class="toolTippedText" href="http://www.blogger.com/post-edit.g?blogID=8226995528209216388&postID=639147409705240717" title="Your hover text">This Text</a> to see one. They can be particularly useful if you want to provide a translation for a few words from another language, or a definition for technical terms, but don't have enough to make a glossary worthwhile. </div> <h2>How to add a tool-tip in Blogger</h2> Open the Post (etc) that you are working on. Create the item that you want the tool-tip to be on (it may be text or a picture). Select the item, and use the Link button on the toolbar to set up a link for it.  (Do this even if you don't want it to end up linked to anything - you can remove the link part alter on.) Go into HTML mode (top right side of the editor toolbar), and find the HTML for the item.   Hints: <ul><li>Use the find feature in your brower - it may be helpful to temporarily put some <a href="http://blogger-hints-and-tips.blogspot.com/2014/07/use-marker-text-to-go-to-a-place-in-html-code.html">marker text</a> just before and after the item.</li></ul><ul><li>If you want to put a tooltip into a text gadget - just put the text into an HTML gadget instead, and that way you will be able to work in HTML mode.</li></ul><ul><li>The HTML for the item will have this sort of structure: <blockquote><code class="xml plain"><</code><code class="xml keyword">a</code> <code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"Your Link"</code> <code class="xml color1"></code><code class="xml plain"></code><code class="xml string"></code><code class="xml color1"></code><code class="xml plain"></code><code class="xml string"></code><code class="xml plain">> Your item text ...<code class="xml keyword"> </a></code><code class="xml plain"></code></code></blockquote>or it may be like this if your item is a picture: <blockquote><img border="0" src="URL FOR YOUR PICTURE" style="margin-left: auto; margin-right: auto;" /></blockquote>or even like this if it's a picture that's linked: <blockquote style="font-family: "Courier New", Courier, monospace;"><code class="xml plain"><</code><code class="xml keyword">a</code> <code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"Your Link"</code> <code class="xml color1"></code><code class="xml plain"></code><code class="xml string"></code><code class="xml color1"></code><code class="xml plain"></code><code class="xml string"></code><code class="xml plain"></code>img border="0" src="URL FOR YOUR PICTURE" style="margin-left: auto; margin-right: auto;" </a></blockquote></li></ul> Add  title="YOUR HOVER TEXT" to the HTML, so it becomes something like: <blockquote><code class="xml plain"><</code><code class="xml keyword">a</code> <code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"Your Link" title="YOUR HOVER TEXT"</code> <code class="xml color1"></code><code class="xml plain"></code><code class="xml string"></code><code class="xml color1"></code><code class="xml plain"></code><code class="xml string"></code><code class="xml plain">> Your item text ...<code class="xml keyword"> </a></code><code class="xml plain"></code></code></blockquote>or, if the item is a picture: <blockquote><<code class="xml plain"></code><code class="xml keyword">a</code> <code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"Your Link" </code>img border="0" src="URL FOR YOUR PICTURE" <code class="xml string">title="YOUR HOVER TEXT" </code>style="margin-left: auto; margin-right: auto;" </a></blockquote> If you don't want the item to be linked, remove the <code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"Your Link"</code> part of the statement, so the HTML becomes similar to:<code class="xml plain"> </code> <blockquote><code class="xml plain"><</code><code class="xml keyword">a</code> <code class="xml color1"></code><code class="xml plain"></code><code class="xml string">title="YOUR HOVER TEXT"</code> <code class="xml color1"></code><code class="xml plain"></code><code class="xml string"></code><code class="xml color1"></code><code class="xml plain"></code><code class="xml string"></code><code class="xml plain">> Your item text ...<code class="xml keyword"> </a></code><code class="xml plain"></code></code></blockquote>or, if the item is a picture: <blockquote style="font-family: "Courier New", Courier, monospace;"><<code class="xml plain"></code><code class="xml keyword"></code> <code class="xml color1"></code><code class="xml plain"></code><code class="xml string"></code>img border="0" src="URL FOR YOUR PICTURE" <code class="xml string">title="YOUR HOVER TEXT" </code>style="margin-left: auto; margin-right: auto;" /></blockquote> If you're working in the post-editor, return to Compose mode (top right of the Post Editor window), so that you aren't faced with HTML the next time you edit a post. <h2>Formatting unlinked text that has tooltips.</h2>If you put hover-text on words that aren't linked to anything, it's good to give them a different format so that readers know to mouse-over them to see the hover-text.    For example <blockquote>When you visit Ireland, you will undoubtedly experience rain, <a class="toolTippedText" href="http://www.blogger.com/post-edit.g?blogID=8226995528209216388&postID=639147409705240717" title="music">ceol</a> and great <a class="toolTippedText" href="http://www.blogger.com/post-edit.g?blogID=8226995528209216388&postID=639147409705240717" title="fun">craic</a>.</blockquote> To do this: 1   Add this CSS rule to your blog's template  (See <a href="http://blogger-hints-and-tips.blogspot.com/2010/09/adding-new-css-formatting-rule-to-your.html">Adding a new CSS rule to your template</a> if you need help with this): <blockquote style="font-family: "Courier New", Courier, monospace;">.toolTippedText {    border-bottom: 1px dotted red; }</blockquote> 2   While editing your Post (etc) to add the hover-text, also add this class statement <blockquote></blockquote><blockquote>class="toolTippedText" </blockquote>to every URL which has title="YOUR HOVER TEXT" added to it.  So the full statements become <blockquote><code class="xml plain"><</code><code class="xml keyword">a</code> <code class="xml color1">href</code><code class="xml plain">=</code><code class="xml string">"Your Link" title="YOUR HOVER TEXT"</code> class="toolTippedText"<code class="xml color1"></code><code class="xml plain"></code><code class="xml string"></code><code class="xml color1"></code><code class="xml plain"></code><code class="xml string"></code><code class="xml plain">> Your item text ...<code class="xml keyword"> </a></code><code class="xml plain"></code></code></blockquote>or, if you don't want the text to actually be linked to anything: <blockquote><code class="xml plain"><</code><code class="xml keyword">a</code> <code class="xml color1"></code><code class="xml plain"></code><code class="xml string">title="YOUR HOVER TEXT"</code> class="toolTippedText"<code class="xml color1"></code><code class="xml plain"></code><code class="xml string"></code><code class="xml color1"></code><code class="xml plain"></code><code class="xml string"></code><code class="xml plain">> Your item text ...<code class="xml keyword"> </a></code></code></blockquote> It probably doesn't make sense to add a font-decoration like this to tool-tipped images - though it can be done in exactly the same way. If you don't like using red dots as the way to highlight text that has hover-text, there are other rules you can add to your template.  For example to get a solid underline in the same colour as the text font, use: <blockquote style="font-family: "Courier New", Courier, monospace;">.toolTippedText { <div> text-decoration:underline;</div>} </blockquote> There is more information about some of the options for formatting a line <a href="http://blogger-hints-and-tips.blogspot.com/2010/04/adding-separator-line-between-your.html">in this article</a>. <hr /><h2>Related Articles: </h2><a href="http://blogger-hints-and-tips.blogspot.com/2010/09/adding-new-css-formatting-rule-to-your.html">Adding a new CSS rule to your template</a>. <a href="http://blogger-hints-and-tips.blogspot.com/2010/04/adding-separator-line-between-your.html">Adding a horizontal line between blog-posts - including CSS line formatting options</a> <a href="http://blogger-hints-and-tips.blogspot.com/2014/07/use-marker-text-to-go-to-a-place-in-html-code.html">Using marker-text to find places in your HTML</a>

Adding tooltips or hover text to Blogger posts and gadgets

This article is about putting a "tooltip" (text that is shown when you hover over) into something (eg text, a web-address or even ...