Results 1 to 5 of 5

Thread: Sticky Balloon Tooltips

  1. #1
    Join Date
    Mar 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Sticky Balloon Tooltips

    1) Script Title: Rich HTML Balloon Tooltip

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...oontooltip.htm

    3) Describe problem: Not so much a problem; more an "if only....".

    I have dabbled with all sorts of different scripts for popping up extra informationon a page, and this one comes nearest to the ideal for me. In particular, it is much easier to run other scripts inside it than the alternatives. This is important to me because I want to have links inside my tips that display images with Floatbox.

    However, there is one thing that Balloon Tooltip doesn't do, that I would like it to. Instead of closing after a pre-determined time delay, I would like it to be sticky and to have a "close" link within the tooltip content. I have stared helplessly at the code for hours, but my feeble javascript skills won't get me anywhere close to rewriting bits of the code. Has anyone done this already? Or can give me some pointers on where to start?

    Thanks in anticipation
    Paul
    Last edited by littlehotels; 03-30-2010 at 08:44 AM. Reason: It's resolved!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    In balloontip.js around line 112, comment out this highlighted line as shown in red:

    Code:
    function initalizetooltip(){
    var all_links=document.getElementsByTagName("a")
    if (enablearrowhead){
    tiparrow=document.createElement("img")
    tiparrow.setAttribute("src", arrowheadimg[0])
    tiparrow.setAttribute("id", "arrowhead")
    document.body.appendChild(tiparrow)
    }
    for (var i=0; i<all_links.length; i++){
    if (reltoelement(all_links[i])){ //if link has "rel" defined and it's the ID of an element on page
    all_links[i].onmouseover=function(e){
    var evtobj=window.event? window.event : e
    displayballoontip(this, evtobj)
    }
    //all_links[i].onmouseout=delayhidemenu
    }
    }
    }
    Now you are free to make your own close buttons right in the tip HTML, example:

    Code:
    <!--Sample balloon tooltip-->
    <div id="balloon1" class="balloonstyle" style="width: 350px; background-color: lightyellow">
    <a href="#" onclick="delayhidemenu(); return false;" title="Close">X</a><br>
    Award winning JavaScript tutorials and over 400+ free scripts.
    </div>
    That's just an example, you may use an image, style it, get as fancy as you like. But you will have to do it for each tip.

    One other thing to consider with this is that since delayhidemenu does delay the close a little so that mousing back over the link quickly will stop the tip from disappearing, you may want to set (at the beginning of balloontip.js):

    Code:
    //Rich HTML Balloon Tooltip: http://www.dynamicdrive.com/dynamicindex5/balloontooltip.htm
    //Created: September 10th, 2006
    
    var disappeardelay=0  //tooltip disappear delay (in miliseconds)
    var verticaloffset=0 //vertical offset of tooltip from anchor link, if any
    var enablearrowhead=1 //0 or 1, to disable or enable the arrow image
    var arrowheadimg=["arrowdown.gif", "arrowup.gif"] //path to down and up arrow images
    var arrowheadheight=11 //height of arrow image (amount to reveal)
    
    /////No further editting needed
    Last edited by jscheuer1; 03-29-2010 at 05:45 PM. Reason: sense
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    This looks just as easy to put in script inside it, and it sticks:
    http://www.dynamicdrive.com/dynamici...ckytooltip.htm
    Jeremy | jfein.net

  4. #4
    Join Date
    Mar 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    John, that is brilliant. Thank you. Now I just have to drop the bit of code into all the necessary pages and then I can put it up.

    Nile, I did try stickytooltip and several others. I can't remember why I rejected stickytooltip, but none of them quite fitted the bill.

    I'm delighted to be able to keep everything I already have, and just make the one little change that I need.

  5. #5
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Alright.
    It seems your topic is solved... Please set the status to resolved.. To do this:
    Go to your first post ->
    Edit your first post ->
    Click "Go Advanced" ->
    Then in the drop down next to the title, select "RESOLVED"
    Jeremy | jfein.net

Bookmarks

Posting Permissions

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