This article is nearly putting a "tooltip" (text that is shown when you lot hover over) into something (eg text, a web-address or fifty-fifty a picture) inward a Blogger postal service or gadget.
Tooltips are a characteristic works life inward many websites together with modern estimator based software: when a viewer hovers their mouse over an item, a modest slice of text is shown, to a greater extent than oftentimes than non formatted inward a box which is highlighted inward around way.
They tin endure used for all sorts of things, to render definitions of technical or foreign-language words, additional data nearly peculiarly interesting concepts - or every bit an incentive or invitation to accept an activeness eg you lot could tool-tip "click hither to enter" alongside a description of the prize or benefits of entering.)
You tin run across them inward Blogger's Post Editor when you lot position your mouse over an item inward the toolbar.
Open the Post (etc) that you lot are working on.
Create the item that you lot desire the tool-tip to endure on (it may endure text or a picture).
Select the item, together with utilisation the Link push clitoris on the toolbar to set upward a link for it. (Do this fifty-fifty if you lot don't desire it to terminate upward linked to anything - you lot tin take the link move modification on.)
Go into HTML mode (top correct side of the editor toolbar), together with find the HTML for the item.
Hints:
Add title="Adding tooltips or hover text to Blogger posts together with gadgets" to the HTML, then it becomes something like:
If you lot don't desire the item to endure linked, take the
move of the statement, then the HTML becomes similar to:
If you're working inward the post-editor, render to Compose mode (top correct of the Post Editor window), then that you lot aren't faced alongside HTML the side past times side fourth dimension you lot edit a post.
To produce this:
1 Add this CSS rule to your blog's template (See Adding a novel CSS dominion to your template if you lot necessitate tending alongside this):
2 While editing your Post (etc) to add together the hover-text, also add together this class statement
It in all likelihood doesn't brand sense to add together a font-decoration similar this to tool-tipped images - though it tin endure done inward just the same way.
If you lot don't similar using ruby dots as the agency to highlight text that has hover-text, at that spot are other rules you lot tin add together to your template. For instance to larn a venture underline inward the same color every bit the text font, use:
There is to a greater extent than data nearly around of the options for formatting a business in this article.
Adding a horizontal business betwixt blog-posts - including CSS business formatting options
Using marker-text to honour places inward your HTML
What are tooltips?
They tin endure used for all sorts of things, to render definitions of technical or foreign-language words, additional data nearly peculiarly interesting concepts - or every bit an incentive or invitation to accept an activeness eg you lot could tool-tip "click hither to enter" alongside a description of the prize or benefits of entering.)
You tin run across them inward Blogger's Post Editor when you lot position your mouse over an item inward the toolbar.
But tool-tips tin endure used on other things too, including pictures together with text: position your mouse over This Text to run across one.
They tin endure peculiarly useful if you lot desire to render a translation for a few words from around other language, or a Definition for technical terms, but don't create got plenty to brand a glossary worthwhile.
They tin endure peculiarly useful if you lot desire to render a translation for a few words from around other language, or a Definition for technical terms, but don't create got plenty to brand a glossary worthwhile.
How to add together a tool-tip inward Blogger
Open the Post (etc) that you lot are working on.
Create the item that you lot desire the tool-tip to endure on (it may endure text or a picture).
Select the item, together with utilisation the Link push clitoris on the toolbar to set upward a link for it. (Do this fifty-fifty if you lot don't desire it to terminate upward linked to anything - you lot tin take the link move modification on.)
Go into HTML mode (top correct side of the editor toolbar), together with find the HTML for the item.
Hints:
- Use the honour characteristic inward your brower - it may endure helpful to temporarily position around marker text only earlier together with later the item.
- If you lot desire to position a tooltip into a text gadget - only position the text into an HTML gadget instead, together with that agency you lot volition endure able to piece of job inward HTML mode.
- The HTML for the item volition create got this variety of structure:
or it may endure similar this if your item is a picture:<ahref="Your Link"> Your item text ...</a>
<img border="0" src="URL FOR YOUR PICTURE" style="margin-left: auto; margin-right: auto;" />
or fifty-fifty similar this if it's a painting demo that's linked:
<ahref="Your Link"img border="0" src="URL FOR YOUR PICTURE" style="margin-left: auto; margin-right: auto;" </a>
Add title="Adding tooltips or hover text to Blogger posts together with gadgets" to the HTML, then it becomes something like:
or, if the item is a picture:<ahref="Your Link" title="Adding tooltips or hover text to Blogger posts together with gadgets"> Your item text ...</a>
<ahref="Your Link"img border="0" src="URL FOR YOUR PICTURE"title="Adding tooltips or hover text to Blogger posts together with gadgets"style="margin-left: auto; margin-right: auto;" </a>
If you lot don't desire the item to endure linked, take the
href="Your Link"move of the statement, then the HTML becomes similar to:
or, if the item is a picture:<atitle="Adding tooltips or hover text to Blogger posts together with gadgets"> Your item text ...</a>
<img border="0" src="URL FOR YOUR PICTURE"title="Adding tooltips or hover text to Blogger posts together with gadgets"style="margin-left: auto; margin-right: auto;" />
If you're working inward the post-editor, render to Compose mode (top correct of the Post Editor window), then that you lot aren't faced alongside HTML the side past times side fourth dimension you lot edit a post.
Formatting unlinked text that has tooltips.
If you lot position hover-text on words that aren't linked to anything, it's skillful to plough over them a unlike format then that readers know to mouse-over them to run across the hover-text. For exampleWhen you lot see Ireland, you lot volition undoubtedly sense rain, ceol together with neat craic.
To produce this:
1 Add this CSS rule to your blog's template (See Adding a novel CSS dominion to your template if you lot necessitate tending alongside 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="Adding tooltips or hover text to Blogger posts together with gadgets" added to it. So the amount statements become
or, if you lot don't desire the text to truly endure linked to anything:<ahref="Your Link" title="Adding tooltips or hover text to Blogger posts together with gadgets"class="toolTippedText"> Your item text ...</a>
<atitle="Adding tooltips or hover text to Blogger posts together with gadgets"class="toolTippedText"> Your item text ...</a>
It in all likelihood doesn't brand sense to add together a font-decoration similar this to tool-tipped images - though it tin endure done inward just the same way.
If you lot don't similar using ruby dots as the agency to highlight text that has hover-text, at that spot are other rules you lot tin add together to your template. For instance to larn a venture underline inward the same color every bit the text font, use:
.toolTippedText {
text-decoration:underline;}
There is to a greater extent than data nearly around of the options for formatting a business in this article.
Related Articles:
Adding a novel CSS dominion to your template.Adding a horizontal business betwixt blog-posts - including CSS business formatting options
Using marker-text to honour places inward your HTML