Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,778
    Thanks
    19
    Thanked 155 Times in 146 Posts

    Smile Bubble / Balloon Tooltips

    I know this has been done before, but I'm going to go ahead and post this code snippet here anyway, in the event that someone else has the same problems that I had.

    I was looking for a tooltips script that I could easily integrate into any site. In this case, I needed the script to "not" rely on any particular javascript library or framework (ala jquery or prototype).

    Searching the web, I found many tooltips scripts, but they all were either outdated, bloated, or overly complex (or any combination thereof). I realized I could write my own extensible javascript tooltips "class" using less code, and make it easier to implement in the process.

    So the fruits of my labor are attached to this thread in the form of a ZIP file. For those of you daring enough to use this code snippet on your own site, here's what you need to do/keep in mind:

    1) Download the ZIP file and unpack it to some directory on your server (duh)

    2) The directory structure should look like the following ('D' stands for Directory):

    -- images (D)
    -- tooltipsJS.js
    -- tooltipsStyles.css
    -- tooltipstest3.html

    3) tooltipstest3.html is the example implementation.

    4) In the HTML file, you'll need to set the class name "tooltip" on any image (in this case, I used little question mark images) that you want to attach a tooltip to.

    5) In the HTML file, you can set the "question", "answer", and "tipwidth" (for each tooltip) via the similarly-named attributes of your question mark image elements. (And, yes, I know these attributes are not standard, valid attributes of the image element. But, A) I don't care, and B) it works great (especially when you need to populate tooltip content using a server side language and database).

    6) In the HTML file, you'll notice that the tooltips are loaded (on page load!) by instantiating the Tooltips class, and passing a collection of HTML images as the lone argument. Note: If I were you, I would isolate my tooltip images -- question mark images -- as best as possible in the following manner:

    Code:
    document.getElementById('divThatContainsMyQuestionMarks').getElementsByTagName('img');
    7) The tooltips will adjust themselves automatically when placed at the far right or bottom of a browser window (so that you will never have to scroll to see a tooltip).

    8) The look and feel of the tooltips are customizable via the external CSS file (tooltipsStyles.css) and/or by editing the images in the images directory. The images consist of each of the 4 corners of a given tooltip, the background for each side of a tooltip, and the different balloon/bubble pointers. (Note: Some tweaking of the JS in tooltipsJS.js may be required as well -- if this becomes a problem for someone, I may consider "fixing" this so that editing the javascript file is not necessary.)


    FYI - I've tested this script in the latest version of Firefox, Internet Explorer, and Opera. Works fine in all three.

    In the future, I may add a few more features:

    1) Make drop shadow optional
    2) Control size of drop shadow
    3) Make the tooltip fade in and out onmouseover and onmouseout respectively
    4) Something else?...

    For now, this script does what I need it to do, and that's all that really matters, right?

    Anyway, enjoy the code snippet, and I hope it helps someone. Please contact me here if you have any questions/concerns.
    Attached Files Attached Files
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  2. Users who have thanked chump2877 for this post:

    oesxyl (03-20-2011)

  • #2
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,778
    Thanks
    19
    Thanked 155 Times in 146 Posts
    3) Make the tooltip fade in and out onmouseover and onmouseout respectively
    I have added an optional fade in for the tooltips. See the new, attached ZIP file for the updated files.

    The only difference in implementation is an additional parameter passed to the Tooltips class:

    Code:
    	window.onload = function()
    	{
    		var images = document.getElementsByTagName('body')[0].getElementsByTagName('img');
    		var tooltips = new Tooltips(images, true);
    	};
    ...where 'images' is the original parameter (described in the previous post of this thread), and 'true' is the new boolean parameter that enables the fade in functionality. Conversely, setting the second parameter to 'false' disables the fade (and the tooltips will behave as they did in my previous version of this script).

    Again, I've tested this successfully in the most recent versions of Firefox, IE, and Opera. (Note: If you look close enough, you may notice that the fade in animation looks slightly different in IE compared to other browsers. This is because the IE-only opacity filter disables ClearType during the fade animation, and I must manually restore ClearType after the animation completes.)

    Again, your feedback is welcome here, and please let me know if you experience any issues with the code.
    Attached Files Attached Files
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    interesting. this may be exactly what I need. Or kind of what I need. Or nothing at all like what I need.

    So before I start, I may as well check:

    what I need is something that pops up a div (like a tooltip, but with the div contents defined elsewhere, not just text) when mousing over another div.

    I assume that being that images are just html elements, the element to be moused over can be anything, but can the contents of the tooltip also be manipulated in this way, or do they have to be straight text?

    or is there a much simpler way to do this?

    thanks in advance. I hope my question made sense...

  • #4
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,778
    Thanks
    19
    Thanked 155 Times in 146 Posts
    what I need is something that pops up a div (like a tooltip, but with the div contents defined elsewhere, not just text) when mousing over another div.

    I assume that being that images are just html elements, the element to be moused over can be anything, but can the contents of the tooltip also be manipulated in this way, or do they have to be straight text?
    Currently, the additional attributes in the markup (pertaining to popup/tooltip content) only accept "plain text", per the following JS in the external JS file:

    Code:
    			// Create tooltip container body
    			var tip = document.createElement("div");
    			tip.id = "tooltip";
    
    			var question = document.createElement("p");
    			question.id = "question";
    			var questionText = document.createTextNode(imgObj.getAttribute("question"));
    
    			var answer = document.createElement("p");
    			answer.id = "answer";
    			var answerText = document.createTextNode(imgObj.getAttribute("answer"));
    
    			question.appendChild(questionText);
    			answer.appendChild(answerText);
    			tip.appendChild(question);
    			tip.appendChild(answer);
    I suppose, in theory, if you had content (other than or in addition to just text), you could include markup directly in the attributes like so:

    Code:
    <img src="images/question_mark.png" alt="" class="tooltip" question="<img src='image1.jpg' alt='' /><p>What happens when I change the region?<p>" answer="<img src='image1.jpg' alt='' /><p>Changing the region is a site-wide configuration that allows you to discover and view only those businesses from the selected region.</p>" tipwidth="300" />
    (That's some downright ugly markup there, but it still works in browsers when saved as .html and served as XHTML. And of course the markup would need to be escaped inside the attributes.)

    Then include an empty, invisible div anywhere in the markup:

    Code:
    <div id="hiddenDiv" style="display:none"></div>
    Then you change the JS like so:


    Code:
    			// Create tooltip container body
    			var tip = document.createElement("div");
    			tip.id = "tooltip";
                                      var hiddenDiv = document.getElementById('hiddenDiv');
    
                                      hiddenDiv.innerHTML = imgObj.getAttribute("question");
                                      var question = hiddenDiv.cloneNode(true);
    			question.id = "question";
    
                                      hiddenDiv.innerHTML = imgObj.getAttribute("answer");
    			var answer = hiddenDiv.cloneNode(true);
    			answer.id = "answer";
    
    			tip.appendChild(question);
    			tip.appendChild(answer);
    Again, that seems like it could work...Haven't tested it though...

    And I forgot to mention that you'll need to change "display:none" to "display:block" for the question and answer nodes at some point....or simply assign "display:none" for the original "hiddenDiv" div in a stylesheet instead of inline as I have it in my example...
    Last edited by chump2877; 03-29-2011 at 12:55 AM.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • Users who have thanked chump2877 for this post:

    xelawho (03-29-2011)

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    thanks! I'll give it a shot and let you know how I go...

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    cool. tested in IE, Chrome and Firefox. .

    a couple of observations:

    - it seems that in FF and Chrome the right border of the tooltip doesn't get drawn properly on the first mouseover, but it does on subsequent ones - or is this a problem with my code specifically?

    - I don't know how hard it would be, but it would be good to have the width adjust itself dynamically according to the content.

    thanks again. A very handy, user-friendly piece of code.

  • #7
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by xelawho View Post
    - it seems that in FF and Chrome the right border of the tooltip doesn't get drawn properly on the first mouseover, but it does on subsequent ones - or is this a problem with my code specifically?
    same here, right-top tooltip. Using firebug seems that the node is append to the dom each time and not removed, maybe this help.
    firefox 3.5.16 here

    best regards

  • #8
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,778
    Thanks
    19
    Thanked 155 Times in 146 Posts
    I see the problem....

    My best guess is that after the image inside the tooltip is appended to the DOM, not enough time has elapsed for the image to fully load, thus the offsetHeight property of the tool tip does not inititally add the height of the image to the height of the tooltip, and we have the problem we're looking at.

    The second time around (when activating the tooltip), the image is in the browser cache so it loads much more quickly, quick enough for the code to calculate an accurate value for the tootip's offsetHeight.

    A couple of ways to fix this:

    1) Preload tooltip images (via javascript) on page load
    2) In javascript file, check for img.onload for content inside the tooltip that is newly appended to the DOM.

    I'm working on this now, so I can fix it and publish a copy here.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #9
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,778
    Thanks
    19
    Thanked 155 Times in 146 Posts
    Ok, I fixed the problem (via option #2 in my previous post). That took longer than expected! Some major refactoring of the code in the JS file involved there.

    Minor changes to the HTML and CSS files:

    1) The "question" and "answer" attributes have been replaced by a single "tipcontent" attribute that should accept any amount of text and/or HTML markup.

    2) A few style changes.

    Probably best to just use the new set of files found in the ZIP file attached to this post.

    I have tested this new code in Firefox, IE, and Opera.

    Let me know if it works right for you guys!

    P.S. BTW, I have noted the request for tooltip width expanding dynamically with content. I'll explore that idea more at a later time.
    Attached Files Attached Files
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • The Following 2 Users Say Thank You to chump2877 For This Useful Post:

    oesxyl (03-30-2011), xelawho (03-30-2011)

  • #10
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    yep. working perfectly now.

    my one meagre contribution for anybody reading this in future: to style the content inside the tooltip, all you need to do is set up a tipcontent div in the tooltipsStyles css file. So to center text and images, you would add this:
    Code:
    #tipcontent {
    margin-left: auto ;
    margin-right: auto ;
    text-align:center;
    }
    etc. thanks again, RJ
    Last edited by xelawho; 03-30-2011 at 05:50 PM.

  • Users who have thanked xelawho for this post:

    oesxyl (03-30-2011)


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •