News!! Adding Tooltips Or Hover Text To Blogger Posts In Addition To Gadgets

This article is nearly putting a "tooltip" (text that is shown when yous hover over) into something (eg text, a web-address or fifty-fifty a picture) inwards a Blogger post service or gadget.

What are tooltips?

Tooltips are a characteristic industrial plant life inwards many websites together with modern figurer based software:  when a viewer hovers their mouse over an item, a pocket-size slice of text is shown, to a greater extent than oft than non formatted inwards a box which is highlighted inwards around way.

They tin last used for all sorts of things, to supply definitions of technical or foreign-language words, additional data nearly peculiarly interesting concepts - or equally an incentive or invitation to accept an activeness  eg yous could tool-tip "click hither to enter" amongst a description of the prize or benefits of entering.)

You tin encounter them inwards Blogger's Post Editor when yous position your mouse over an item inwards the toolbar.

But tool-tips tin last used on other things too, including pictures together with text: position your mouse over This Text to encounter one.

They tin last peculiarly useful if yous desire to supply a translation for a few words from around other language, or a Definition for technical terms, but don't lead keep plenty to brand a glossary worthwhile.

How to add together a tool-tip inwards Blogger

Open the Post (etc) that yous are working on.


Create the item that yous desire the tool-tip to last on (it may last text or a picture).


Select the item, together with purpose the Link push on the toolbar to set upward a link for it.  (Do this fifty-fifty if yous don't desire it to goal upward linked to anything - yous tin take away the link business office alteration on.)


Go into HTML mode (top correct side of the editor toolbar), together with find the HTML for the item.  
Hints:

• Use the detect characteristic inwards your brower - it may last helpful to temporarily position around marker text only earlier together with subsequently the item.

• If yous desire to position a tooltip into a text gadget - only position the text into an HTML gadget instead, together with that means yous volition last able to travel inwards HTML mode.

• The HTML for the item volition lead keep this kind of structure:
  

  <a href="Your Link" > Your item text ... </a>

  or it may last similar this if your item is a picture:
  

  <img border="0" src="URL FOR YOUR PICTURE" style="margin-left: auto; margin-right: auto;" />

  or fifty-fifty similar this if it's a moving painting that's linked:
  

  <a href="Your Link" img border="0" src="URL FOR YOUR PICTURE" style="margin-left: auto; margin-right: auto;" </a>

Add  title="News!! Adding tooltips or hover text to Blogger posts together with gadgets" to the HTML, together with thus it becomes something like:

<a href="Your Link" title="News!! Adding tooltips or hover text to Blogger posts together with gadgets" > Your item text ... </a>

or, if the item is a picture:

<a href="Your Link" img border="0" src="URL FOR YOUR PICTURE" title="News!! Adding tooltips or hover text to Blogger posts together with gadgets" style="margin-left: auto; margin-right: auto;" </a>

If yous don't desire the item to last linked, take away the href="Your Link"
business office of the statement, together with thus the HTML becomes similar to:

<a title="News!! Adding tooltips or hover text to Blogger posts together with gadgets" > Your item text ... </a>

or, if the item is a picture:

< img border="0" src="URL FOR YOUR PICTURE" title="News!! Adding tooltips or hover text to Blogger posts together with gadgets" style="margin-left: auto; margin-right: auto;" />

If you're working inwards the post-editor, render to Compose mode (top correct of the Post Editor window), together with thus that yous aren't faced amongst HTML the adjacent fourth dimension yous edit a post.

Formatting unlinked text that has tooltips.

If yous position hover-text on words that aren't linked to anything, it's skilful to plough over them a dissimilar format together with thus that readers know to mouse-over them to encounter the hover-text.    For example

When yous see Ireland, yous volition undoubtedly sense rain, ceol together with cracking craic.

To create this:


1   Add this CSS rule to your blog's template  (See Adding a novel CSS dominion to your template if yous involve assist amongst this):

.toolTippedText {
   border-bottom: 1px dotted red;
}

2   While editing your Post (etc) to add together the hover-text, also add together this class statement

class="toolTippedText" 

to every URL which has title="News!! Adding tooltips or hover text to Blogger posts together with gadgets" added to it.  So the amount statements become

<a href="Your Link" title="News!! Adding tooltips or hover text to Blogger posts together with gadgets" class="toolTippedText"> Your item text ... </a>

or, if yous don't desire the text to truly last linked to anything:

<a title="News!! Adding tooltips or hover text to Blogger posts together with gadgets" class="toolTippedText"> Your item text ... </a>

It likely doesn't brand sense to add together a font-decoration similar this to tool-tipped images - though it tin last done inwards just the same way.


If yous don't similar using ruby dots as the means to highlight text that has hover-text, at that spot are other rules yous tin add together to your template.  For instance to teach a venture underline inwards the same color equally the text font, use:

.toolTippedText {

 text-decoration:underline;

}

There is to a greater extent than data nearly around of the options for formatting a trouble in this article.

---

Related Articles:

Adding a novel CSS dominion to your template.

Adding a horizontal trouble betwixt blog-posts - including CSS trouble formatting options

Using marker-text to detect places inwards your HTML

Tweet

Subscribe to receive free email updates: