Tooltips pulled from External Page

Tooltips are a useful way to provide additional information to the user without requiring the user change their current page.

A simple approach for tooltips is to create a link with a title attribute or a hidden div within the page that will display when the designated link is hovered or clicked. This will certainly get the job done if you have a finite number of tooltips that you need for a page. However the difficulty with this approach becomes apparent when:

  • You need the additional information to come from an external page
  • You need the same information to appear multiple times throughout a site

Let’s face it as programmers, you want to reduce the amount of upkeep on a site. Just imagine if you need to update each tooltip that appears on each page. The great thing about this approach is that if you ever need to make additional updates, you can do it all from one glossary page and each of the tooltips will automatically be updated as well.

So lets get to it! I’ll start off with the basic simple tooltip and expand upon that approach until we get to our tooltips that are being pulled from an external page.

jQuery UI Tooltip

The simplest approach would be to include the jQuery UI. When calling the tooltip function, the title of an element is used to create the content of the tooltip.

Example:

* For further information on this approach check this out: http://jqueryui.com/tooltip/

Pros:

  • Easy to implement
  • Able to customize look and feel  of tooltip through css

Cons:

  • Unable to include additional html for images, videos, etc.

jQuery Tooltip with Hidden Div

Another approach is to create a hidden div within the page. This allows for more flexibility on what to display and style.

The idea behind this is to create a div with a unique id. This id will then be used in the link href attribute as an anchor so as to create a target to the hidden content.
Sample of hidden div:

This a tag will also need a specific class (‘dejargonator’) for the jQuery functionality.
Sample of a tag:

The jQuery will take care the rest for positioning the tooltip. Additional custom css can be used to give a different look and feel. The only required css is to make the hidden div display: none and position: absolute so that the div is not initially visible and so that the div can be positioned properly.
jQuery:

All together now!
Example:

Pros:

  • Ability to include additional html such as images, videos, etc.
  • Allows more customization

Cons:

  • More of a setup

jQuery Tooltip from an External Page

And now we finally arrive to the tooltips from an external page. The advantage of this approach is that if you need a tooltip to appear in multiple pages within a site, the updates to all the tooltips can be made from the one external page. This approach also allows flexibilities to include different html elements.

The idea behind it is similar to the approach used for the jQuery Tooltip with Hidden Div section. An external html page is created in a similar manner as how the hidden div was set up with an element with a unique id. This id will then be used in the link href attribute as an anchor so as to create a target to the hidden content.
Sample of external page:

The above html is an example of an external glossary page. On the main content page, the href attribute will need to be the url to the external page and the anchor to the tooltip information within the external page. Again the a tag will need a specific class (‘dejargonator’) for the jQuery functionality.
Sample of a tag:

In this approach the jQuery functionality will append the div within the a tag with the tooltip information. The stylings can then be further altered with css.
jQuery:

Here is a sample of the css used for this particular example. The only necessary piece of css is to position the appended element absolutely.
CSS:

 

All together now!
CSS, jQuery, External HTML Page
DEMO

Pros:

  • Ability to edit multiple tooltips from one location
  • Ability to include additional html elements
  • Customization of the tooltip

Cons:

  • More to setup

That’s all I’ve got on that for now.

 

13 thoughts on “Tooltips pulled from External Page

    1. Thanks! There will definitely be more posts to come. If there is anything in particular that you would like to know more about just let me know.

      Also thanks for sharing your site!

  1. Hеy I am so glad Ι found yοur weblο&X67;,
    I reall&X79; found yο&X75;b&X79; mі&X73;take, whilе I
    was browѕing on Yahoo fоr somet&X68;in&X67; else,
    Nonethelesxs I a&X6d; here noω and ωould
    juѕt lіke to say cheerѕ
    fοr a marѵelouѕ рost and a &X61;ll round
    inteгesting blog (I аlso love thе theme/ԁesign), I don’t have ti&X6d;e to
    go through it a&X6c;l at th&X65; moment but Ӏ have bοok-markеԁ it and a&X6C;so added in
    your &X52;SS feeds, so when I havе time I wi&X6c;&X6c; bе baсk t&X6F; read more, P&X6c;ease ԁo keep up the excellen&X74; job.

    Feel &X66;ree to vis&X69;t my &X68;omepage http://www.youtube.com/watch?v=sKjlIjkX41k (Lisette)

    1. hey thanks for all the kind words! I’m looking forward to posting more soon. If there is anything I can help you out with just let me know and ill try my best!

  2. We are a group of voluntеer&X73; аnԁ
    &X6f;ρ&X65;ni&X6E;g a br&X61;nd new ѕcheme in our
    commu&X6E;itу. You&X72; wеbѕitе &X6f;ffeг&X65;d us with helρful info &X74;o worκ on.
    You &X68;ave ԁone a&X6E; i&X6D;prеssіve
    task and οur e&X6E;&X74;irе commu&X6e;ity
    ωill &X62;e thankful to you.

    my blog; i love music (http://www.ewhayeyak.net)

  3. I noticed that it’s hard to find your website in google, i found it on 22th spot, you should get some quality backlinks to rank it in google and increase traffic. I had the same problem with my blog, your should search in google for – k2 seo services – it helped me a lot

  4. you’re in point of fact a excellent webmaster.
    The site loading velocity is amazing. It seems that you are doing any distinctive
    trick. Furthermore, The contents are masterwork.

    you’ve done a great activity on this matter!

Comments are closed.