You are here

Cool module: pop ups in Drupal (Beauty Tips module)

Tool tip samples

'google-maps' style, displayed to the right of the element:

'transparent' style, displayed at the top of the element:

Setting up the module and tooltip pages

  1. Download the module at https://drupal.org/project/beautytips
  2. Note the module's documentation instructions on installing
    IMPORTANT INSTALLATION INSTRUCTIONS
    3   ------------------------------------------------------------------------------------
    4   In order for this module to work properly with IE, you will need to download the 
    5   ExplorerCanvas library, which can be found here - http://excanvas.sourceforge.net/.
    6   Place the downloaded directory 'excanvas_r3' inside the 'beautytips/other_libs' directory.
    7
    8   Other than that, you just need to turn the module on in the usual Drupal way.
    9
    10   --------------------------------------------------------------------------------------
    1. Psst.  A direct link to the library download is here: http://code.google.com/p/explorercanvas/downloads/list
    2. Also, make sure to create the 'excanvas_r3' directory before unzipping and unzip into it - the zip file doesn't include that encompassing directory
  3. Once you have the pre-requisite IE library in the right spot, enable the BeautyTips modules
  4. Next, go to the BeautyTips custom tips screen at /admin/config/user-interface/beautytips/custom-tips
  5. Add your very own custom BeautyTip.  Here is how I have one of mine setup:
    1. Element: span#bt
      1. This means that the Beautytip will only be applies to <span> elements with the id of bt, in other words:

        <span id="bt">... </span>
    2. Type of Content: attribute
    3. Content to Display: tooltip
      1. Here you should enter the attribute of the element from above (span) whose text you want to be displayed in the tooltip
      2. So in my case, BeautyTip will look for the 'tooltip' attribute in any span that has an id of 'bt' and will display that text on hover

        <span id="bt" tooltip="Display this text on hover">... </span>
    4. Style: in the samples above I used the 'google-maps' and 'transparent' styles -- try them all out!
    5. Positions: here I rated, from 1 to 4 the order of my preference for each tooltip position
    6. Pages: Show on only the listed pages: node/12345
      1. As you can see, you can include or exclude the BeautyTip functionality from pages
  6. Add the right html to any page where you want the awesome cool pop-ups!
    1. Now just go to any page (as long as you've enabled BeautyTip for it, if you filled in the 'Pages' section above) and edit the html of the page to include some of the elements you've enabled BeautyTip for.  Here is example html on one of my pages

      <ul>
        <li><span id="bt" tooltip="The logos will be resized to 50x50 pixels">Upload logo</span></li>
        <li><span id="bt" tooltip="Limit descriptions to 256 characters">Description</span></li>
        <li><span id="bt" tooltip="The larger image will be resized to 270 pixels wide">Larger image</span></li>
      </ul>
  7. Enjoy the result!
Note: CKEditor with the default 'Full HTML' filter kept on 'cleaning up' my html when I was custom-writing the html using the 'source' button, so I finally created a custom text-format at /admin/config/content/formats which did not have any filters enabled and didn't even use CKEditor to display... you may run into that too.  :-)
 
There is plenty of documentation out there if you want to customize your BeautyTips further:

Share

Comments

Boriana, can you comment on a comparison of this module to a similar one "Tipsy"? I am using the latter in a site under development, and didn't know about this one.

Charles, if you haven't committed to one yet and are still in 'development' than I'd consider going with Beauty Tips.  I actually can't speak about their functional differences, since I've never used the Tipsy module.  However, in terms of long-term development and maintenance, it looks like Beauty Tips is more widely used (7,500+ sites vs ~2,000 sites for Tipsy), and more importantly, Beauty Tips is actively maintained, while Tipsy is 'seeking co-maintainers' and hasn't had a commit in 2 years.

So, if you're still in the deciding phase, and Beauty Tips fits your needs, the above considerations may be worth taking into account.

Good luck!!

I was having all sorts of trouble making beautytips worked, this helped immensely. Thanks!

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.