Using BeautyTips on non-form elements (need beginner instructions)

If you're looking for custom beautytips, then you have a couple of options.

1. You can use the module, which will involve some basic php programming and some knowledge of the Drupal theming layer.

2. You can forget about the module and just use the beautytips jquery plugin (as is most likely being done on doitwithdrupal.com).
This will involve a very small amount of php programming, some knowledge of the Drupal theming layer, but also some jquery knowhow.

If you're not comfortable with any of these, then you'll have to pick your poison. My personal opinion is that it will be easier to use the module, because you just have to worry about php programming, instead of both php and jquery.

The most important thing to figure out is where in your code that you'll want to add the beautytips. This is also where knowledge of the Drupal theming layer comes in to play. Where you put in the beautytips code depends on where you want it displayed. Will the beautytips be on a block? Will they be displayed on every page? etc ...
If you let me know your plan, then I can help you further with this part.

If you can get that far, then you're in good shape. You just need to paste the beautytips code into the place you've found. Here's an example:

  $options['calendar_link'] = array(
    'area' => '.calendar a',
    'text' => 'This is the text that will display in the beautytip bubble',
  );
  beautytips_add_beautytips($options);
 

Here, whenever somebody hovers over a link in the css class 'calendar', the text listed will popup as a beautytip. If the 'text' option is not set, then the title attribute of the link will be used as the displayed text instead.

The only necessary option listed is the 'area' option, which is what selects the page element to show the beautytip. It will automatically grab the element's title attribute and display that as the text inside the beautytip. You'll need to be familiar with css in order to get that working correctly.

The options array name 'calendar_link' is there simply so that the same beautytips are not added more than once. So, if you have different beautytips to add, then give them different names. I usually just give them a name that describes briefly what they're for.

A slightly more advanced example:

  $options['input_form'] = array(
    'area' => 'input.form-text',
    'trigger' => array(0 => 'focus', 1 => 'blur'),
    'width' => '275px',
    'positions' => array('bottom'),
    'fill' => 'rgba(0, 0, 0, .8)',
    'strokeStyle' => '#CC0',
    'strokeWidth' => 3,
    'spikeLength' => 40,
    'spikeGirth' => 40,
    'cornerRadius' => 40,
    'cssStyles' => array(
      'color' => '#FFF',
      'fontWeight' => 'bold',
    ),
  );
  beautytips_add_beautytips($options);
 

The 'fill' option gives the background color of the balloon.
The 'strokeStyle' option gives the border color for the balloon.
The 'positions' option tells beautytips which side of the element they should display on.
The 'trigger' option defines what causes the beautytips to display. By default, it's set to hover.

I would start off simply and use the bare minimum of options just to get it working, and then add new things one by one until you get the balloon looking correct.

kleinmp, thanks for the detailed info. To me, it's not totally clear yet.

Put it this way - at http://www.doitwithdrupal.com/2009/schedule there is a bubble above the cell containing "Breakfast".
The code is <td colspan="3" class="session-column">Breakfast<div class="dsc">Free breakfast each morning!</div></td>

So if I follow your explanation, I need to enable the BeautyTips module, and then set the following somewhere.

  $options['ChooseWhateverID'] = array(
    'area' => '.session-column td',
    'text' => 'Free breakfast each morning!',
  );
  beautytips_add_beautytips($options);

Is that correct? Any key for $options, then specify the class and the element, and put the message into 'text'?
Can I stick this code into my module? (I don't want to mess with editing templates.) If so, in what hook? Nodeapi?

What I aim to do is somehow to add the BeautyTips code to some Views pages, specifying target classes of the elements in the search and in the tables to show info bubbles above them.

Found an answer to my own question :-)

It does work that way. Even if you paste it into a PHP-enabled block or page!

This is my working test code:

<p><a href="http://vacilando.net" class="testclass">Vacilando.net</a>
<?php
  $options['ChooseWhateverID'] = array(
    'area' => '.testclass',
    'text' => 'Vacilando.net is bubbling!',
  );
  beautytips_add_beautytips($options);
?>

I'm glad you were able to find an answer.

Here's some more info. that may be helpful. You can specify the text you want to popup by using the option 'contentSelector'.

Fore example if you have the following html:

<td colspan="3" class="session-column">
  Breakfast
  <div class="dsc">Free breakfast each morning!</div>
</td>

Let's also say you want the beautytip to popup when you hover over the td with class 'session-column', and you want the text within the div with class 'dsc' to display.

  $options['ChooseWhateverID'] = array(
    'area' => 'td.session-column',
    'contentSelector' => "$(this).find('.dsc').html()",
  );
  beautytips_add_beautytips($options);

This involves a bit of knowledge of jquery, but is useful in that you can get anything that's on the page already to display in the popups.

Also, I agree that putting the beautytips coe in templates is not the best idea. I usually place it in preprocess functions in my template.php, or theme functions withing custom modules.

Hi lrobeson,

I just posted a tutorial about using BeautyTips with Views. I hope it helps.

http://wootenswebdesign.com/quick-and-easy-beauty-tips

Tim

Well, first of all thanks all for the information posted here...

I am a bit confused so i need some help...

I wish to use bt in any element in my CCK "create new content" form. For this i will make a new module say "customsite.module" and then with hook_form_alter() i'm going to add the tips in elements i wish.

What version should i use : 6.x-1.x-dev or the new 6.x-2.x-dev ?

And another question : what's the difference between this module and http://drupal.org/project/jquerytools tooltip: http://flowplayer.org/tools/tooltip.html ? I was trying (so far) to use tooltip but with no success... This is why i came here to BeautyTips module ;-)

Thanks !

I'd say that the tooltips part of jquerytools and beautytips do pretty similar things. I haven't really used it too much so maybe someone else can comment on that.

As far as which version to use, I would suggest not using either of the dev versions and use 6.x-1.1.

I use beautyTips on my site and seems it works great on page nodes as well as on views.

However, beautyTips seem to not work on the text of CCK fields...
In detail, I have made a new content type using CCK and i've added several text fields. In all of these text fields i added a link of class=terminology where i expect to see my beautytip (the so called beautytip area).

In template.php i've added the following :

$options['terminology'] = array(
'area' => 'a.terminology',
'ajaxPath' => array(0 => "$(this).attr('rel')", 1 => '.view-Terminology'),
'width' => 350,
);
I would expect to see a beautytip whenever a user hovers over those links; this works indeed on my page content types.
I can successfully style the class=terminology links using CSS.
However, beautyTips does nothing in my own CCK content types; not even showing the balloon. Only the CSS styling for the link is applied.
All required beautytip javascript/css is defined correctly in all my pages/nodes.
What puzzles me is why beautyTips works perfectly on pages or views, but not on my CCK nodes.
I would appreciate any answer.

Is PHP interpreting your "$(this)" as a variable? Try using single quotes: '$(this).attr(\'rel\')'

Assuming you have anchor tags with the class 'terminology', have you tried simply adding this to your THEMENAME_preprocess_node() function in template.php? I found it doesn't work inside hook_preprocess_page() for some reason.

$options['terminology'] = array(
  'area' => 'a.terminology',
  'text' => 'This is a beauty tip',
  'width' => 350,
);
beautytips_add_beautytips($options);

Maybe you mean any anchor tag that's a child of a node with 'terminology' class, in which case you should use 'area' => '.terminology a'

Thanks a lot for your reply, Wad.
I figured out (almost by accident) that the problem was due to javascript (jquery?!).
For some reason (didn't have time to debug yet) some javascript was not added properly on my CCK nodes.
As soon as I used the Tabs module, beautyTips was working as expected in my CCK nodes.

I´ve watched the video tutorial at gotdrupal, and couldn´t make it work in my block (that resides inside a quicktab).
Theme: Clearblue
Views name: listados_novedades
Views Block: Nº 2

function clearblue_preprocess_block(&$vars, $hook) {
if( module_exists('beautytips') ) {
  $options['listados_novedades_articulos'] = array(
    'area' => '.block-views-listados_novedades-block_2 .views-field-title a',
	'contentSelector' => '$(this).attr("alt")',
	'trigger' => array(0 =>'mouseover'),
    'width' => 250,
  );
  beautytips_add_beautytips($options);
}
}
'>

I wanted to do exactly as the tutorial: When you hover a view title it shows the node´s body.
My view works ok so far, but it won´t show the body as a beautytip.
I've configured beautytip module also (in settings page).

I´m pretty sure that my css is not correct, but I´ve tried several options (found the ids with firebug).
BTW, I´ve tried #block-views-listados_novedades-block_2 and .block-views-listados_novedades-block_2

None worked...

Hope someone could help me out. What Am I doing wrong?

THANKS!!!!!!

hi all,

Im having a problem with BT , I just cant get anything to show on the front end . Im thinking i may be putting the code in the wrong place in my themes template.php - Im using a midly edited version of the basic theme and this is the code ive pasted immediately before the closing bracket of the basic_preprocess_block function.

 $options['bt_t2'] = array(
	'area' => 'li a',
 	'text' => t('TESTTEXT'),
 	'trigger' => array(0 => 'mouseover'),
 	'width' => 350,
 	);
 	beautytips_add_beautytips($options); 

i want this text to pop up when i mouseover any of the links in the list on my left sidebar. but still all i get are my alt tags. I hope that made sense (im a bit frazzled from a few hours of attempts .

Hope you all can help .

Kind Regards

Nic

This was working fine, I have tested it in blocks and within the content. But when I place it in template.php its not working anymore. Can someone give me a hint, where to put exactly. I am using garland for testing.

Thanks

Katasun

It didn´t worked for me.
It shows the help text of CCK text fields, but nothing that I add to the template.tpl.php file.

I´ve this inside a block:

<div id="block-block-8" class="block block-block">
  <div class="content">
    <div id="bloquecito_rojo">
<span class="titulo">Atención Telefónica</span><br />
... blah blah blah ...

I´ve put this inside my template.tpl.php file:

<?php
  $options['myspecialID'] = array(
    'area' => '.titulo',
    'text' => 'Testing beauty tips!',
  );
  beautytips_add_beautytips($options);
?>

It didn´t worked.
I´ve tried replacing area with cssSelect with no luck.

Any ideas on what I´m doing wrong?
Thanks!!!
Rosamunda

The code looks good except that you need to use 'cssSelect' instead of 'area' or it will not do anything.

The code needs to be run before Drupal builds all of the javascript. This means that hook_preprocess_page is out, but it should be okay to add in at hook_preprocess_node or hook_preprocess_block.

Thanks! I´ll try that out!
This module is terrific, but it most certainly requires some php knowledge :)

It works!!
Thanks!!!

subscribing.

Can anyone explain what are form elements?

I am using an "add node" as a form for users but do not know if there is a different official type of form that I am missing.

I have installed Beauty Tips and am trying to find out where they apply "easily" without knowing php or jquery if possible.

Thanks.

Can you post what the php code in your template.php looks like? I'm not sure if drupal is seeing the code I added.. thank you!

it was conflicting with another javascript I had referenced in my tags. It works in internet explorer but the formatting is destroyed in firefox. The beautytips text is outside of the beautytips box. Is this a bug?

Ok. I've tried all the simplest examples listed on this help and many others - with all the various substitutions for things and added quotes and escaped quotes and all the other suggested ways to get things to work - but no beauty tips appear - At All.

It is if the documentation for jQuery/BeautyTips starts at Chapter 5 - and with all code referenced from the 1st 4 chapters abbreiviated with elipses so that crucial missing pieces are Never Explained. Is the "Readme.txt" actually considered "The Official Documentation"? That would be absurd, so ...

How about listing *all* the code - and where it goes - for the neat demo-page (that page sold me on this module). It's already been written, so just tell us what the code is and where it goes. Just the first example would do. That page works in my browser off the author's site, but when I plug the code supplied there into my site no tips appear - just the usual alt-text in the little box (like w/o BT - and for some examples not even that).

Actually, any Complete Info to make a Single Example Work which lists:
1. The code to put in the webpage
2. The code to put in specified php or other file(s) under the theme
3. Any other code or changes which need to be made where ever

... would be fantastic. Then we can begin changing/adding/moving things and see what happens - but we have to open the hood before we can work on the engine. Two days of reading, hundreds of Google links down, and no one has mentioned where the hood-latch release is.

Thanks,

Hopefully this helps someone get into this. In this example, the paths point where they should if you install beautytips under 'www/drupal/sites/all/modules/'. This was taken from the "demo" page, but has useful things like what goes around the supplied javascript code and is simplified so that it is easy to tell what is doing what.

<head>
<script src="../sites/all/modules/beautytips/other_libs/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8">
</script>
<script src="../sites/all/modules/beautytips/other_libs/jquery.hoverIntent.minified.js" type="text/javascript" charset="utf-8">
</script>
<script src="../sites/all/modules/beautytips/other_libs/bgiframe_2.1.1/jquery.bgiframe.min.js" type="text/javascript" charset="utf-8">
</script>

<!--[if IE]><script src="../sites/all/modules/beautytips/other_libs/excanvas_r3/excanvas.js" type="text/javascript" charset="utf-8"></script>
<![endif]-->
<script src="../sites/all/modules/beautytips/js/jquery.bt.min.js" type="text/javascript" charset="utf-8">
</script>

<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#example1').bt();
});
</script></p>

</head>

<p>
	Text Before Hover Link
 <br/>

<span id="example1" title="The content of this tooltip is provided by the 'title' attribute of the target element.">
	HOVER</span>

<br />
	Text After Hover Link
</p>

Building a regular old web page in a text editor and running firebug on that output is the way to go; I would not recommend anyone try to get things like this working first in Drupal - get it working in a regular .html file, then move it into Drupal, then, if it doesn't work, figure out how Drupal is breaking it and fix that.

Also, do all code pasting in "PHP Code" mode in Drupal (you have to download a special module to have your code unmolested). I say "code pasting" because the input-box is not designed for writing code, the WYSIWYG CKEditor will really run amok with any code it encounters, and even "Full HTML" (indeed) mode will trash your formatting. So all WYSIWYG work and code work must be done externally, it seems. As Scotty would say, "How Quaint."