Menu
I want to add a help logo at the end of some form fields which opens a tooltip.
Everything is working, but the .helptip icon (http://img1.wsimg.com/shared/img/1/small-help-icon.gif) is coming on the left(merged) with the text. I actually want in on the right of span text, so I did .help-tip:after. But then nothing shows up at all.
Can you spot what's wrong?
<div class="advancedSearchFormSelectField fclear"> <span id="view_format_mis" class="advancedSearchFormlabel help-tip"> Include Columns in Result Set </span> <select class="advancedSearchFormSelectBox" id="filters_include_columns" multiple="multiple" name="filters[include_columns][]"> <option value="x">X</option> <option value="y">Y</option> <option value="z">Z</option> </select> </div> <div class="advancedSearchFormSelectField fclear"> <span id="view_format_mis" class="advancedSearchFormlabel"> Sort Column </span> <!--No help tip here --> <select class="advancedSearchFormSelectBox" id="filters_sort_columns" multiple="multiple" name="filters[sort_columns]"> <option value="a">A</option> <option value="b">B</option> <option value="c">C</option> </select> </div> .help-tip { /* Merged text at the moment. .help-tip:after not working */ cursor: pointer; width: 10px; height: 10px; background-repeat: no-repeat; background-image: url("/assets/small-help-icon.gif"); } .advancedSearchFormSelectField{ width:300px; margin: 5px; height: 60px; float:left; } 
271
CSS ::before and ::after pseudo-elements allow you to insert “content” before and after any non-replaced element (e.g. they work on a <div> but not an <input> ). This effectively allows you to show something on a web page that might not be present in the HTML content.
In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
A CSS pseudo-element is used to style specified parts of an element. For example, it can be used to: Style the first letter, or line, of an element. Insert content before, or after, the content of an element.
Definition and UsageThe ::before selector inserts something before the content of each selected element(s). Use the content property to specify the content to insert. Use the ::after selector to insert something after the content.
You don't seem to be using a pseudo-element at the moment. Try this setting .help-tip to .help-tip::after and giving is content: "" and display: inline-block:
.help-tip::after { content: ""; display: inline-block; cursor: pointer; width: 10px; height: 10px; background-repeat: no-repeat; background-image: url("/assets/small-help-icon.gif"); } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
