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

Home

About

Contact

Blogs

Drupal area

Contrib modules

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

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

Download the module at https://drupal.org/project/beautytips

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 -------------------------------------------------------------------------------------- Psst. A direct link to the library download is here: http://code.google.com/p/explorercanvas/downloads/list Also, make sure to create the 'excanvas_r3' directory before unzipping and unzip into it - the zip file doesn't include that encompassing directory

Psst. A direct link to the library download is here: http://code.google.com/p/explorercanvas/downloads/list

Also, make sure to create the 'excanvas_r3' directory before unzipping and unzip into it - the zip file doesn't include that encompassing directory

Once you have the pre-requisite IE library in the right spot, enable the BeautyTips modules

Next, go to the BeautyTips custom tips screen at /admin/config/user-interface/beautytips/custom-tips

Add your very own custom BeautyTip. Here is how I have one of mine setup: Element: span#bt This means that the Beautytip will only be applies to elements with the id of bt, in other words: ... Type of Content: attribute Content to Display: tooltip Here you should enter the attribute of the element from above (span) whose text you want to be displayed in the tooltip 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 ... Style: in the samples above I used the ' google-maps ' and ' transparent ' styles -- try them all out! Positions: here I rated, from 1 to 4 the order of my preference for each tooltip position Pages: Show on only the listed pages: node/12345 As you can see, you can include or exclude the BeautyTip functionality from pages

Element: span#bt This means that the Beautytip will only be applies to elements with the id of bt, in other words: ...

This means that the Beautytip will only be applies to elements with the id of bt, in other words: ...

Type of Content: attribute

Content to Display: tooltip Here you should enter the attribute of the element from above (span) whose text you want to be displayed in the tooltip 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 ...

Here you should enter the attribute of the element from above (span) whose text you want to be displayed in the tooltip

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 ...

Style: in the samples above I used the ' google-maps ' and ' transparent ' styles -- try them all out!

Positions: here I rated, from 1 to 4 the order of my preference for each tooltip position

Pages: Show on only the listed pages: node/12345 As you can see, you can include or exclude the BeautyTip functionality from pages

As you can see, you can include or exclude the BeautyTip functionality from pages

Add the right html to any page where you want the awesome cool pop-ups! 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>Upload logo</li> <li>Description</li> <li>Larger image</li> </ul>

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>Upload logo</li> <li>Description</li> <li>Larger image</li> </ul>

Enjoy the result!

Drupal BeautyTips module page

Module demo page

Module announcement blog

Add new comment

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!

More information about text formats

No HTML tags allowed.

Web page addresses and e-mail addresses turn into links automatically.

Lines and paragraphs break automatically.

Truth https://t.co/bteOgf587j — 14 hours 27 min ago

Fills me with awe and wonder https://t.co/vUK4oJfeKa — 15 hours 44 min ago

.@BreneBrown ’s Rising Strong book is so good, I’m underlining every third sentence, folding every second page. — 15 hours 49 min ago

RT @claymosleylive : FYI, your company Christmas card should not be a sales call. — 19 hours 52 min ago

Subscribe to newsletter Privacy Policy

Let's connect: Twitter | LinkedIn