What are tooltips?
They hand the sack final used for all sorts of things, to render definitions of technical or foreign-language words, additional information close especially interesting concepts - or every bit an incentive or invitation to conduct maintain an activity eg yous could tool-tip "click hither to enter" alongside a description of the prize or benefits of entering.)
You hand the sack come across them inwards Blogger's Post Editor when yous seat your mouse over an special inwards the toolbar.
But tool-tips hand the sack final used on other things too, including pictures together with text: seat your mouse over This Text to come across one.
They hand the sack final especially useful if yous wish to render a translation for a few words from roughly other language, or a definition for technical terms, but don't Pb continue enough to build a glossary worthwhile.
They hand the sack final especially useful if yous wish to render a translation for a few words from roughly other language, or a definition for technical terms, but don't Pb continue enough to build a glossary worthwhile.
How to add together together a tool-tip inwards Blogger
Open the Post (etc) that yous are working on.
Create the item that yous wish the tool-tip to final on (it may final text or a picture).
Select the item, together with role the Link force on the toolbar to set upward a link for it. (Do this flush if yous don't wish it to destination upward linked to anything - yous hand the sack convey away the link concern role modification on.)
Go into HTML mode (top right side of the editor toolbar), together with find the HTML for the item.
Hints:
- Use the let on feature inwards your brower - it may final helpful to temporarily seat roughly marker text solely before together with later on the item.
- If yous wish to seat a tooltip into a text gadget - solely seat the text into an HTML gadget instead, together with that agency yous testament final able to locomote inwards HTML mode.
- The HTML for the special testament Pb continue this variety of structure:
or it may final similar this if your special is a picture:<ahref="Your Link"> Your special text ...</a>
<img border="0" src="URL FOR YOUR PICTURE" style="margin-left: auto; margin-right: auto;" />
or flush similar this if it's a moving ikon that's linked:
<ahref="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 In Addition To Gadgets" to the HTML, together with hence it becomes something like:
or, if the special is a picture:<ahref="Your Link" title="News!! Adding Tooltips Or Hover Text To Blogger Posts In Addition To Gadgets"> Your special text ...</a>
<ahref="Your Link"img border="0" src="URL FOR YOUR PICTURE"title="News!! Adding Tooltips Or Hover Text To Blogger Posts In Addition To Gadgets"style="margin-left: auto; margin-right: auto;" </a>
If yous don't wish the special to final linked, convey away the
href="Your Link"concern role of the statement, together with hence the HTML becomes similar to:
or, if the special is a picture:<atitle="News!! Adding Tooltips Or Hover Text To Blogger Posts In Addition To Gadgets"> Your special text ...</a>
<img border="0" src="URL FOR YOUR PICTURE"title="News!! Adding Tooltips Or Hover Text To Blogger Posts In Addition To Gadgets"style="margin-left: auto; margin-right: auto;" />
If you're working inwards the post-editor, homecoming to Compose mode (top right of the Post Editor window), together with hence that yous aren't faced alongside HTML the side past times side quaternary dimension yous edit a post.
Formatting unlinked text that has tooltips.
If yous seat hover-text on words that aren't linked to anything, it's goodness to turn over them a different format together with hence that readers know to mouse-over them to come across the hover-text. For exampleWhen yous consider Ireland, yous testament undoubtedly feel rain, ceol together with smashing craic.
To practise this:
1 Add this CSS rule to your blog's template (See Adding a new CSS govern to your template if yous ask assistance alongside this):
.toolTippedText {
border-bottom: 1px dotted red;
}
2 While editing your Post (etc) to add together together the hover-text, also add together together this class statement
class="toolTippedText"to every URL which has title="News!! Adding Tooltips Or Hover Text To Blogger Posts In Addition To Gadgets" added to it. So the total statements become
or, if yous don't wish the text to genuinely final linked to anything:<ahref="Your Link" title="News!! Adding Tooltips Or Hover Text To Blogger Posts In Addition To Gadgets"class="toolTippedText"> Your special text ...</a>
<atitle="News!! Adding Tooltips Or Hover Text To Blogger Posts In Addition To Gadgets"class="toolTippedText"> Your special text ...</a>
It probable doesn't build feel to add together together a font-decoration similar this to tool-tipped images - though it hand the sack final done inwards but the same way.
If yous don't similar using ruby dots as the agency to highlight text that has hover-text, at that spot are other rules yous hand the sack add together together to your template. For instance to learn a firm underline inwards the same color every bit the text font, use:
.toolTippedText {
text-decoration:underline;}
There is to a greater extent than information close roughly of the options for formatting a problem in this article.
Related Articles:
Adding a new CSS govern to your template.Adding a horizontal problem between blog-posts - including CSS problem formatting options
Using marker-text to let on places inwards your HTML