Fancy Bubble Tooltips
I am not sure if this should be in module development or themeing, but here is my question.
I have been playing with the Nicelinks module which works pretty good, but I found a turotial for creating bubble tooltips which is more of what I am looking for, for my fancy shmancy site! The tutorial is located here http://www.web-graphics.com/mtarchive/001717.php , and the javascript code is pretty straight forward, but I cannot seem to get it to work with my limited drupal experience...
So I guess what I am looking for is ...
1) an existing module with similar functionality or...
2) info on how to update nicelinks to include the background image listed in the tutorial, which doesnt seem too difficult, but I cant really see how the div tags are being set to have the top of the box drawn, followed by the bottom. It is clear in hte Bubble tooltips script, but merging the two is proving difficult for me.
3) handholding on how to use the bubble-tooltips script in Drupal.
The end goal is to only have this tooltip appear when hovering over a node title for a custom content type I have created. This tooltip would include the first x words of the node content, but if I get 1 2 or 3 going, I should be able to figure this out.
Any help or advice would be most appreciated.
GT
Hi! I had no problem adding
Hi! I had no problem adding it to my site. I didn't try the preferred method so it could cause some problems depending on your theme or other modules, so use at your own risk!
I downloaded the javascript and css file into my theme's directory and the image into my_theme/images.
Load the javascript file in your text editor and modify line 70 to match your theme's directory:
l.setAttribute("href","themes/my_theme/bt.css");
next, load the bt.css file and edit two lines with url() to the correct bt.gif file location:
...url(images/bt.gif)...
Finally, load the file page.tpl.php file in your theme's directory.
Just before
</head>update and insert this code (replace 'my_theme' with the name of your site's theme):<script type="text/javascript" src="<?php print base_path() . drupal_get_path('theme', 'summer'); ?>/BubbleTooltips.js"></script><script type="text/javascript">
window.onload=function(){enableTooltips()};
</script>
That should do it.
Thanks so much
Thanks so much for the help! I had missed in my hours of staring at the code, the requirement to change the location of the css file in the .js file.
For the next people looking at this info, I will also make note that I had to make some further changes to the code as noted below (not sure if my changes are required or if they are a work around, your experiences may differ) but myriad got me going on the right track!
As a note I do not have my theme directly under themes directory, but I have it in an additional directory called custom, hence the references to custom/my_theme.
1) For me I had to edit line 69 of the javascript file...
Original
l.setAttribute("href","bt.css");My Changes
l.setAttribute("href","/themes/custom/my-theme/bt.css");2) Next in the .css file I had to change the image url to the the full path of the background image. I would had assumed that a relative url would have worked, but id did not for me.
Original
background: url(images/bt.gif) no-repeat top}And
background: url(images/bt.gif) no-repeat bottom}My Changes
background: url(/themes/custom/my_theme/images/bt.gif) no-repeat top}And
background: url(/themes/custom/my_theme/images/bt.gif) no-repeat bottom}In my page.tpl.php file I had to again use the full url of the Bubbletooltips.js file without the leading / as the print base_path() function was including a trailing /
<script type="text/javascript" src="<?php print base_path() .drupal_get_path('theme','my_theme');?> themes/custom/my_theme/BubbleTooltips.js"></script><script type="text/javascript">
window.onload=function(){enableTooltips()};
</script>
But once again I could have not made these quick fixes without the info provided by myriad. Thanks for the quick response and wonderful notes, rather than just saying "it worked for me" you were a great Drupal citizen and took the time to provide some tips. I really appreciate it!
thanks!
That's nice of you say!
My suggestion certainly isn't perfect. I played with it and found it broke all other javascripts that use the 'onload' function. So I thought I should learn to fix that! I wrote a super simple module called bubbletip that loads the javascript modified to work with Drupal and only shows the link's title attribute. It does not show the link in the bubble, however, you can easily add that by modifying line 30:
if (0){to
if (1){The bubbletip module can be downloaded here:
http://www.english-japan.com/files/bubbletip.zip
just unzip into your Drupal module directory (or unzip and upload) and enable it.
I hope it works for you!
dang nabbit!
I played some more and found and kindof solved another bug. Originally, the css breaks after you go a few menu levels deep, such as /blog/1 so I fixed it by having a dynamic .css file INSIDE the module itself. This is bad practice and I don't know what else to do. However, it works for me now no matter where I am on the website.
To update the css file, you need to edit bubbletip.module. I know it stinks. I could use the external bt.css file and do string replacing to fix it. If you would like that, please let me know, otherwise I'll let it be as it is. The lastest file version is 1.1. The link above should be valid.
Its really amazing...
How in this day and age of quick development, and posting to the Internet how things can go from a posting of a question to two versions of a module in less than 12 hours...
The idea of removing that link is fabulous, and was wat I was working on when you posted the module, however what I really want to do is display node content in the tooltip. Any idea how to get that database call into the javascript? I was looking at the following infomation to get the php database call into the javascript but cant seem to get it working...
http://www.javascriptkit.com/javatutors/externalphp.shtml
As for the css in the module, it might not be the best practice, but it is not hacking core and if it works that is good enough for me...
Off to try version 1.1 and then work on getting my node content inside the bubble...
Thanks again for your work...
GT
an idea or two or three
how much node content do you want to have in the bubble? The bt.gif file is not so big so I expect it would get ugly if there is too much content. In any case, I have some ideas that could do what you want.
One idea is to simply make the "title" attribute contain all of the text you want. I think it would be fully comptabile in the event the user doesn't have javascript.
An other idea is to create a new attribute called "extra" and edit the bubbletip javascript file to extract and delete the attribute, just like the "title" attribute. This method should hide the text if javascript is turned off, but will invalidate the HTML. I guess most browers will ignore any errors.
And lastly, if you take a look at the bubbletip.module file in the bubbletip_menu function, you can see the command "drupal_set_html_head()".
before this, you could do all your database work to collect the node text you want and insert a javasript array into the header. If you modify the javascript file, it could then use that array to make your fancy-schmancy bubbletip. This is probably the more difficult way to do it, but maybe the cleanest if the user doesn't have javascript.
btw, if the module doesn't work for you, then I probably have the solution right here. Just like in the last example, I used a javascript variable "BASE_URL" in the code. When I view the source of my webpage, I can see this variable, but I don't know where it came from. If you don't have it, add this code before line 30 (like in my last idea):
drupal_set_html_head('<script type="text/javascript"><!--var BASE_URL = "'. base_path() .'";
--></script>');
I have some ideas for this module on my web site, so I might expand it to include different graphics for different content types. The dynamic css comes in handy at this point. I'll let you know if I do.
Wow, more great ideas
For the particular project I am working on, I am wanting to have at most the following amount of text...
1 Line of product information
2 Lines of product information
3 Lines of product information
4 Lines of product information
This is stored as a single text field in the node which consists of Title, Description (the text I want to display), Start Date, End Date, Regular Price, Sale Price.
The context for this is I have 4 to 5 products which are on special every month which I want to display down the right side of the page, there is also a second group of products which is also displayed every month. So I dont have room for ...
Product Name
1 Line of product information
2 Lines of product information
3 Lines of product information
4 Lines of product information
Regular Price - Sale Price
This would be repeated 8 to 10 times down the page, so would get rather long...
So I am using the bubbletip to have the following...
Product Name (Tool tip displays four lines of product info)
Regular Price - Sale Price
Which repeated 8 to ten times fits well.
That being said the idea to have it usefull for larger node content could be handy for other uses down the road, for us or for others...
As the data I want to display is completely in a database fiel I think the method of putting the database calls in the javascript file is best, however I am having a little trouble with the co-mingling of javascript and php and doing it at the right point so that the data is brought in for each link in the block.
I will have a look at your suggestion though.
I have changed the color of hte tooltip bubble to match my testing theme and it is pretty evident that the bubble could be a rip of paper, postcard looking image, sale sticker or any number of things. I think there is really a lot of potential for this script / module...
Thanks again and I will let you know how I make out, and if you have any further ideas I would love to hear them...
GT
in the theme?
The approach I would take to add the extra info into the bubbletip is to start rewriting the javascript a bit. What we have so far is great for popping up the 'title' tag. But I think you want something a little different. What I suggest is to use similar css code, but make a drupal filter that inserts the before or after a link with all the text you want to show. "nani-nani" is japanese for "blah-blah".
An alternative and less transportable way would be to do the work in your content type's theme, or block. if you have node-nani-nani.tpl.php file in your theme's main dir, then you could call up the database for the goodies and use css to activate the bubbles. You could use an on-hover class to activate the mouse movement in javascript and reposition the layer of your bubble to follow.
Does any of that make sense?
Thats what I was thinking...
The approach I would take to add the extra info into the bubbletip is to start rewriting the javascript a bit. What we have so far is great for popping up the 'title' tag. But I think you want something a little different. What I suggest is to use similar css code, but make a drupal filter that inserts the before or after a link with all the text you want to show. "nani-nani" is japanese for "blah-blah".That is the route I was taking, to have the javascript pull in the database field and display it. Doing this at the theme level is my most likely option because I may wish to do this with different styles for different blocks...
The problem I am still having, is taking the php variable which contains the text I am wanting to display, and transfer it to the javascript to display on the page, and this is proving very difficult for me. It has to be done in the proper spot so that roling over the proper link displays the proper text. Your idea of setting an attribute called extra, or the existing title attribute with this data would work, but again I go back to getting this from the variable into the javascript...
Any suggestions on this would be most appreciated.
GT
embeded id?
Well, you could apply an unique ID tag:
<a id="bt-nid-396" href="www.productlink.com" title="" alt="">Product name</a>where the unique id contains the node id of 396 and your javascript grabs the data based on it. Makes sense in my head. I dunno if it makes sense in the code though.I will try
Thanks again for all your help. It seems so easy but...
Tooltips
I've actually modified this very same piece of Javascript to show a tooltip (and created a way to turn them off) over an <input/> element. Of course I'm not actually using them for a Drupal site, but the customization should work for any website basically.
You can check out what I mean here. You'll have to click on 'enable help' because I have the tooltips disabled by default.
Dave
simple fix
Although I went ahead and made a module, I guess you could just replace:
window.onload=function(){enableTooltips()};with Drupal's javascript function:
if (isJsEnabled()) { addLoadEvent(enableTooltips); }I try the module in my 4.7.3
I try the module in my 4.7.3 install and doesn't seems to work, the nicelinks work for me
updated module to 1.1b
please redownload the .zip file and try again.
If it doesn't work, then maybe drupal didn't update its menu system. please flush the drupal cache and make sure that www.yoursite.com/bubbletip/bt.css works. It requires friendly urls to be enabled.
please let me know if you had success or not.
3 Posts Ago...
Hey Myriad,
I posted a coment as a reply, but not to the last post you made, so it kind of got embedded out of chronological order. Any thoughts on the questions I posted?
Thanks
GT
I try but i can't get it to
I try but i can't get it to work, and i can't find the bt.css link in my home page source code, i have the drupal cache off, using 4.7.3 and when i turn the module on , i get all default drupal javascript off
Thanks
hmmmm...
Just to double check what you've done... You downloaded my module, unziped it, put it in the modules directory, and enabled it from the administration menu?
When I view the source of my page I see this near the top between the
<head>...</head>tags:<script type="text/javascript" src="/modules/bubbletip/BubbleTooltips.js"></script><script type="text/javascript"><!--
if (isJsEnabled()) { addLoadEvent(enableTooltips); }
--></script>
I can't understand why it doesn't work for you. I have no problems at all. Perhaps I did more editing than I thought? If it still doesn't work for you, I'll double check everything I did for my site.
It's 4am! Good night! (^o^) (-.-) (_ _) ZZZzzzz ZZZZzzzzz
Hello Thats what i did, and
Hello
Thats what i did, and i can't see the css call on my html head
Thanks
This is what im getting
I downloaded the zip file and extracted it in the module folder and enabled it thru admin -> modules page
This is what im getting. I wonder why this
"<script type="text/javascript"><!--
if (isJsEnabled()) { addLoadEvent(enableTooltips); }
--></script>"
didnt work for me
I tried accessing "http://server/bubbletip/bt.css" It works well
Any help would be greatly appreciated.
thanks
I wonder...
Is it possible your browser isn't meeting all of Drupal's conditions to use javascript? do you get the fancy open/close blocks when adding content or editing settings in the admin page?
Are there any "file not found" errors in your logs about the javascript that "enableTooltips()" is stored?
When you view source, do you see something like this between
<header></header>?<script type="text/javascript"><!--var BASE_URL = "/";
--></script>
I betcha that's it. I must of took that BASE_URL for granted from another module, probably the javatools module. I'll update my script in the morning.
updated
version 1.1c is now on my server.
I added the BASE_URL variable and added prevention of double addLoadEvent calls.
Please message me if there are any more problems and I will do my best to fix it.
Worked!!!
Hey Myriad,
Big thanks for helping me out. It worked perfectly. [:)]
Really appreciate the effort you put in this.
thanks
Booya! \(^-^)/\(^o^)/
Booya! \(^-^)/\(^o^)/
Is there any issue with tinymce and bubble tip?
Hey Myriad,
I wonder why bubbletip is not loading sometimes.
**
<style type="text/css">@import "/modules/bookreview/bookreview.css";</style>
<script type="text/javascript" src="/misc/drupal.js"></script>
<script type="text/javascript" src="/modules/bubbletip/BubbleTooltips.js"></script>
<script type="text/javascript"><!--
if (isJsEnabled()) {
var BASE_URL = "/";
addLoadEvent(enableTooltips);
}
--></script>
**
This is the header of the site. Earlier it was working perfectly, but all of a sudden, I mean after I installed tinymce. It seems to have stopped loading.Now the bubble tip is not loading well..
Can you kindly help me out ?
Figured it out
The .JS files only seem to load when I go to edit a page. I'm not sure quite why but TinyMCE also turns off this same loading
2007
I'm upgrading my site to 5.0 now so I'll take a hard look at the bubble tip module. I'll be pretty busy this month so maybe we'll have to wait until 2007 for the next version.
bubble tip for 5.1
i saw the concept of the Bubble Tip..its a gem..wish it comes into 5.1
do let us know if u managed it.
thanks
There's the jTooltips module
There's the jTooltips module for Drupal 5.1. In a near future will support Bubble tooltips by Alessandro Fulciniti or a similar one made in jQuery (lighter)
http://drupal.org/project/jtooltips
___________________
Katapekkia | Multiblog Sociale
Psicomante Blog
Psicomante's Themes for Drupal
I need some help about
I need some help about bubble tip module.
I'm using drupal 4.7.x and installed bubbletip.zip.
It works and whenever I hover my mouse on the node title, it shows the node title as a bubble style.
But my problem is I need to write some description about the terms which is under categories that link in my block.
for example, I created category "A" and I added "Apple","Orange",.. terms etc under category "A".
Then I put them in the block and when i hover the mouse over "Apple" or "Orange", I need to show some explanation about that terms as a bubble tip.
How can I make it using bubble tip?
Your help and suggestion is highly appreciated.
been a long time
Hi there! I'm sorry to say I haven't used bubble tip since 5.0 of drupal was released. However, I found the link at the top and to my surpise it worked!
Firstly, have you looked for another module that does what you want? If there is nothing else then you might be able to get this module to work for you. All this module does is run the javascript file included that searches through all the links on your page and finds the "title" element in the link tag. You can change "title" to anything you want but your page may not validate properly. The trick is to get the info you want into that element.
I totally forget what happens with taxonomy. Doesn't the description get put into the "title" element?
Do you have any PHP ability?