styling "hasTip"

Problem: Pop up instructions have a transparent background and no amount of styling using the tag class attribute "hasTip" works.

A good example is the tool tip associated with the "Forgot Password" and "Forgot Username" pages. The code in question for the email label is: class="hasTip required" title="Email Address::Please enter the email address associated with your User account.<br /> Your username will be emailed to the email address on file." on the Forgot Username -> Reminder page.

The difficulty seems to arise because Joomla 1.5 uses the class="hasTip" to style pop ups. However, Joomla 1.6 changed that to "tip", but the class is still rendered in the source code as "hasTip", which applies to something different. Perhaps for this reason, this is not an easy solution to find.

Here it is.

  1. In one of the CSS stylesheets add this code: div.tip {}
    This defines the pop up "box"; the styling you would want to apply here would include:
    • background
    • width
    • padding
    • etc.
  2. If you want to style the "title", add this code: div.tip .tip-title.
  3. If you want to style the "text", add this code: div.tip .tip-text.

The .tip-title and .tip-text styles can be whatever you wish to match your website's styling. If you wish to see an example, visit our Contact Us page. Click either the "Forgot your Password" or "Forgot your Username" links. Scroll over the "Email Address" on either page to see the effect.