I was just trying to get Beauty Tips to work in the Waffles theme (Acquia Marina mod) but have an issue (using Firefox 3.5.3 and IE8).

I wanted the tip to appear to the right of a left sidebar block, Views filter select element, but it gets cut off - the tip won't extend beyond the sidebar div. I tried playing with the z-index in both CSS and JS, and the Z options for BT, but to no avail. I stuck the code in views-exposed-form.tpl.php and page.tpl.php and got the same results:

<div id="sidebar-first">
<?php print $sidebar_first; ?>

<script type="text/javascript">
$('select').bt('Click and drag for multiple selection', {
  trigger: 'hover',
  positions: 'right',
  shrinkToFit: 'true'
  });
</script>

See attached image of BT problem.

What's wrong?

CommentFileSizeAuthor
#5 carousel-with-beautytips.png31.19 KBtrevorleenc
beauty_tip_error.png24.04 KBdruplicate

Comments

kleinmp’s picture

kleinmp commented

I've experienced this very same problem before, so hopefully the cause of the problem is the same.

It turned out that the beautytip was within a div where the overflow was hidden, so any part of the tip that wanted to display outside the borders of this enclosing div were hidden. If that isn't the problem, then I'm not sure what is off the top of my head. Your code looks fine.

druplicate’s picture

druplicate commented

Yes, that was it. Thanks.

The offending CSS is:

#sidebar-first {
  float: left;
  overflow: hidden;
}

The intent was I believe to keep select boxes from running out of the right hand bounds of the sidebar block.

I had this problem before and it was still ugly since the edge of the div in question was just outside of the border.

I solved that problem by using the "max-width" CSS attribute on any select box elements that were likely to get too wide. This happens because the select box element gets as wide as it needs to accommodate the longest text in any item in the drop down list. W3C needs to do something about that.

Anyway, I just removed the 'hidden' attribute - problem solved!

druplicate’s picture

druplicate commented
Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

trevorleenc’s picture

trevorleenc commented
Status: Active » Closed (fixed)
StatusFileSize
new carousel-with-beautytips.png31.19 KB

Sorry, to re-open this, but I'm running into something very similar, and thought that it might apply to this thread.

I am trying to use BeautyTips (6.x-2.x-dev) using the method here: http://wootenswebdesign.com/quick-and-easy-beauty-tips , along with Views Carousel, and out of the box, everything works pretty OK, with the exception: 'tips' end up being hidden inside the carousel. I'd love for them to appear completely on top of the carousel elements.

Does anyone know how I might fix this?

trevorleenc’s picture

trevorleenc commented
Status: Closed (fixed) » Active
trevorleenc’s picture

trevorleenc commented

ok, I have found the following solution, by adding offsetParent: \'body\' to the javascript code in my view header.

<?php
drupal_add_js (
  '$(document).ready(function()
  {
    $(".btytp").bt( { offsetParent: \'body\' } ); 
  }); ',
    'inline');
?>

found the fix here: http://plugins.jquery.com/node/9956

hope this helps someone.

Nune-1’s picture

Nune-1 commented
Status: Closed (fixed) » Active

Thank you a lot trevorleenc, this solved my problem

rvdtuin’s picture

rvdtuin commented
Version: 6.x-1.1 » 7.x-2.0-beta2

I which file do I put this piece of coding in??

drupal_add_js ( '$(document).ready(function() { $(".btytp").bt( { offsetParent: \'body\' } ); }); ', 'inline');

I tried putting it in different files with no success. I really don't know where to put it....sorry
Can you help me out?

thanks

pifagor’s picture

pifagor
Location 🇺🇦 Rivne
commented
Issue summary: View changes
Status: Active » Closed (outdated)