Results 1 to 5 of 5

Thread: Text formating in Cool DHTML Tooltips

  1. #1
    Join Date
    Feb 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Text formating in Cool DHTML Tooltips

    Script: Cool DHTML Tooltips
    http://www.dynamicdrive.com/dynamici...tmltooltip.htm

    I may just be missing something simple, but I cannot figure out if it is possible to use a line break in the tooltips text. I'd like to put bullet items in a tool tip and need to make sure each item is on its own line. Also is it possible to do bold text?
    thanks

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    The text for the tooltip can contain HTML, so a simple "<br />" tag should work to add a line break where desired.

  3. #3
    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

    To give you an idea of some of what is possible, cut and paste the following into a page that has the script on it. Important points to note are:

    There are no line breaks in the tip content.

    Double quotes that normally would be used for attributes (in this case the inline style attribute) are replaced with escaped single quotes.

    Code:
    <br><span style="cursor:default;" onMouseover="ddrivetip('<ul style=\'margin-bottom:0;\'><li>Art Directory Twenty One</li><li>About</li><li>Contact Us</li></ul>', '#EFEFEF', 225)";
     onMouseout="hideddrivetip()">Planned Items</span><br>
    Even greater flexibility could be obtained by defining your string as a variable in the script and using the variable to reference it.
    - John
    ________________________

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

  4. #4
    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

    To expand upon my closing statement in my previous post in this thread, try this (I've defined the variable at the end of the script, highlighted red):


    Code:
     . . .
    tipobj.style.width=''
    }
    }
    
    document.onmousemove=positiontip
    
    var tipOne='<ul style="margin-bottom:0;margin-top:0;"><li>Art Directory Twenty One</li><li>About</li><li>Contact Us</li></ul>'
    
    </script>
    
    <br><span style="cursor:default;" onMouseover="ddrivetip(tipOne, '#EFEFEF', 225)";
     onMouseout="hideddrivetip()">Planned Items</span><br>
    - John
    ________________________

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

  5. #5
    Join Date
    Feb 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Well now I feel dumb. I tried using html code before and got no tooltip at all. I think I must have had a bad character somewhere in the text. Thanks for the help, I'm rolling now!

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
  •