Skip to Questions

Guide FAQ - Your LibGuides v1 Questions. Answered!

Q

How do I create a tooltip for some text? I want users to see a pop up description when they mouse over some text.

Last Updated: Feb 17, 2012  |  2479 Views
Topics: Boxes, CSS

Was this helpful? 3   1
A

Answer

The LibGuides style sheet already has some style defined that you can take advantage of...how cool is that??

All you need to do is use a class from our style sheet (called info) and a little HTML to get it done.

If you don't like the default style of the .info class, feel free to make changes!

For example, I've changed the style here so the pop up tooltip displays on top of any text below instead of breaking onto the next line (which is the default behavior).

Changing the Style

  1. System-wide (LibGuides or CampusGuides): log in as an admin level user and go to Admin Stuff > Look & Feel and scroll to the Custom JS/CSS Code box.
    On one guide (CampusGuides only): on a guide, go to Guide Look & Feel > Custom JC/CSS Code.
  2. Add any changes you'd like between <style></style> tags.
    For the example below, here's what I added so the pop up tooltip displays on top of any text below it, instead of breaking on to the next line (which is the default behavior):
    a.info { position:relative; } 
    a.info:hover span { position:absolute; }
  3. Click Save.

Adding It to a Page

You're going to use an anchor tag - <a> - and a span tag - <span> - around your text. The anchor tag is generally used for links, but you won't be linking anything in this case. Basically, we're just taking advantage of the fact that the "info" class is already defined for the anchor tag in our style sheet.

Instructions:

  1. Plain Text Editor tabGo to the box where you want to add the tooltip and click edit text.
  2. If you don't already have text in that box, add whatever text you'd like.
  3. Click the Plain Text Editor tab toward the top of the box.
  4. Add <a class="info"> just before the text where you'd like to create a tooltip.
  5. Add <span> just after that text. Add the text that will display in the tooltip pop up directly after the span tag. There does not need to be a space between the text that is on the screen and the span tag for the pop up.
  6. After the tooltip text, add </span></a>. This will close out the tags properly.
  7. Click Save Changes.

Example: What you'll see in the Plain Text Editor

The content you'll add for the tooltip is in blue.

<p>Besides <a class="info">Rich Text Boxes<span>Rich Text boxes allow you to add any kind of content you wish and format it very easily to boot!</span></a>, I think <a class="info">Link Boxes<span>Link Boxes allow you to add neatly formatted links to your pages and keep statistics on how many times they're clicked.</span></a> are our next most popular type of box.</p>

Example: What you'll see on the page

Besides Rich Text BoxesRich Text boxes allow you to add any kind of content you wish and format it very easily to boot!, I think Link BoxesLink Boxes allow you to add neatly formatted links to your pages and keep statistics on how many times they're clicked. are our next most popular type of box.

Answered by Anna BurkeBookmark and Share

Other Answers / Comments (4)

  1. This is a great feature. However, after the rollover occurs, the formatting in changes. Is there a way to make it stay consistent? Look under PubMed in http://goo.gl/hWv0M.
    Thanks
    by Jeffrey Marzluft on Jan 26, 2012.
  2. Hi Jeffrey!
    You can avoid that formatting change by using the code mentioned in the "Changing the Style" section of this FAQ. I think we may not have mentioned exactly what that style code did the first time around, but it does exactly what you mention. :) In your system-wide head code, enter:

    <style>a.info { position:relative; }
    a.info:hover span { position:absolute; }</style>
    And that should stop the formatting from changing.

    Thanks, hope this helps!
    -Sarah
    by Sarah Pawlek on Jan 26, 2012.
  3. Question. Is there a way to get rid of the dotted line under the text.
    http://guides.aclibrary.org/aecontent.php?pid=310921

    here is some of the code

    Mary Louise Zernicke, MS, MPH, RDNutrition and Dietetics Instructor, Merritt College



    Thanks
    by Andrew on Jun 27, 2012.
  4. Yes, Andrew, there is! :) Just change this CSS:
    a.info { border-bottom:0; }
    by Anna Burke on Jun 27, 2012.

Need Help?

This site contains FAQs for LibGuides v1 only.

LibGuides v2 Documentation
(You must have a LibApps account to access that site.)

Or click HELP in the orange command bar of your v2 system.

Support:

Follow LibGuidesFAQ on Twitter Follow us on Twitter!
 Your questions, answered!

Browse by Popular Topics

Accounts  –  Admin Area  –  API / Widgets  –  Boxes  –  Catalog / Database Integration  –  CSS  –  Customization  –  E-Reserves  –  Embedding Objects  –  General System Questions  –  Group Management  –  Guides  –  Holiday Closures  –  How To...  –  Images  –  LibGuides CMS  –  Links  –  Mobile  –  Pages / Tabs  –  Profiles  –  RSS  –  Search  –  Security  –  Statistics  –  Subject Categories  –  Survey/Form Tool  –  System Administrators  –  Tags  –  Webinar  
View All Topics

Related content from Springshare v1 Help