Results 1 to 3 of 3

Thread: Two differently styled rich HTML tooltips on one page?

  1. #1
    Join Date
    Jul 2005
    Posts
    39
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question Two differently styled rich HTML tooltips on one page?

    1) Script Title: Rich HTML Balloon Tooltip

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

    3) Describe problem: Is it possible to have two differently styled tooltips on one page? I tried using two different variants of the .css sheet, but perhaps there can't be two instances of the .js file..? However, could something be modified in it - maybe the line:

    document.getElementById(relvalue).className=="balloonstyle")? true : false

    ...so that it can refer to two or more styles?

    Thank you.
    Last edited by nevdev; 02-08-2007 at 06:02 PM. Reason: typo

  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

    You do not need to modify the script. You do need a basic knowledge of css style. In the stylesheet, you see the balloonstyle class defined:

    Code:
    .balloonstyle{
    position:absolute;
    top: -500px;
    left: 0;
    padding: 5px;
    visibility: hidden;
    border:1px solid black;
    font:normal 12px Verdana;
    line-height: 18px;
    z-index: 100;
    background-color: white;
    width: 200px;
    /*Remove below line to remove shadow. Below line should always appear last within this CSS*/
    filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135,Strength=5);
    }
    You may also (later on in the same stylesheet) define each individual tip by using its id, example for balloon1:

    Code:
    #balloon1 {
    color:white;
    background-color: black;
    }
    This will add to and/or change the styles provided for it by its class name. For more on css style see:

    http://www.blooberry.com/indexdot/css/propindex/all.htm

    or your favorite css reference.
    - John
    ________________________

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

  3. #3
    Join Date
    Jul 2005
    Posts
    39
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Thanks but I rather meant the attributes within this pre-defined class "balloonstyle", which is tied to the js. I have many divs with id's which are named dynamically by php - their number is unknown, plus I needed to create tooltips of different widths, so I needed to style the class "balloonstyle" directly. Maybe this is not feasible. However I think I can do it by turning my css sheet into a php document! Thanks!

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
  •