1. #1
    Ext User
    Join Date
    Jan 2008
    Posts
    14
    Vote Rating
    0
    tkirkham is on a distinguished road

      0  

    Default Chang background color in a tooltip

    Chang background color in a tooltip


    I am very new to extjs and am trying to play with tooltips. I cannot seem to be able to change the background color. How do you do this? I have tried the config options style, cls, baseCls. Only baseCls seemed to have an effect and that simply removed all style.

    The piece of code I am working with is:
    Code:
    new Ext.ToolTip({
        target: 'my_id',
        html: 'the stuff to display',
        autoWidth: 1,
        style: 'background-color: yellow;'
    });
    Any help would be greatly appreciated.
    Thanks,

    -Tony
    Last edited by evant; 1 Jul 2008 at 3:59 PM. Reason: Use [code][/code] tags.

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,146
    Vote Rating
    673
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Have you tried the bodyStyle config option?

  3. #3
    Ext User
    Join Date
    Jan 2008
    Posts
    14
    Vote Rating
    0
    tkirkham is on a distinguished road

      0  

    Default


    Thank you very much. That has got part of it. I don't know how I missed that parameter in the API listing. The bodyStyle: 'background-color: yellow;' has worked to get the center of the tooltip yellow however, there is a margin around the text that is still light blue with a thin blue border around that. How do I change the color of those?

    Thanks again,

    -Tony

  4. #4
    Sencha Premium Member
    Join Date
    Mar 2009
    Posts
    1
    Vote Rating
    0
    dthorpe is on a distinguished road

      0  

    Default how to match tooltip body background with tooltip background?

    how to match tooltip body background with tooltip background?


    I have a similar question...I just want the body of the tooltip to match the margin/border explained above. Is there an easy way to do that other than using bodyStyle and having the background using the sprite used for the tooltip margin/border?

    Thanks.

  5. #5
    Sencha Premium Member
    Join Date
    Sep 2008
    Posts
    710
    Vote Rating
    6
    Bucs is on a distinguished road

      0  

    Default


    Has this ever been answered? Is there a way to change the entire Ext.Tooltip to use a CSS class? The above explanation only changes the interior body of the tooltip. If so, love to see an example as I have tried cls, ctCls, baseCls, itemCls both in and out of bodyCfg. Nothing seems to change the whole tooltip.

    Thanks

  6. #6
    Ext User euchiyama's Avatar
    Join Date
    Apr 2008
    Location
    Chicago, IL
    Posts
    149
    Vote Rating
    0
    euchiyama is on a distinguished road

      0  

    Default


    Try this...create a custom tip css (this was copied and modified from the base x-tip):

    Code:
    .x-tipcustom{position:absolute;top:0;left:0;visibility:hidden;z-index:20000;border:0 none;}
    .x-tipcustom .x-tipcustom-close{background-image:url(../images/default/qtip/close.gif);height:15px;float:right;width:15px;margin:0 0 2px 2px;cursor:pointer;display:none;}
    .x-tipcustom .x-tipcustom-tc{background:#FFA801 0 -62px;padding-top:3px;overflow:hidden;zoom:1;}
    .x-tipcustom .x-tipcustom-tl{background:#FFA801 0 0;padding-left:6px;overflow:hidden;zoom:1;}
    .x-tipcustom .x-tipcustom-tr{background:#FFA801 right 0;padding-right:6px;overflow:hidden;zoom:1;}
    .x-tipcustom .x-tipcustom-bc{background:#FFA801 0 -121px;height:3px;overflow:hidden;}
    .x-tipcustom .x-tipcustom-bl{background:#FFA801 0 -59px;padding-left:6px;zoom:1;}
    .x-tipcustom .x-tipcustom-br{background:#FFA801 right -59px;padding-right:6px;zoom:1;}
    .x-tipcustom .x-tipcustom-mc{border:0 none;font:normal 11px tahoma,arial,helvetica,sans-serif;}
    .x-tipcustom .x-tipcustom-ml{background:#FFA801 0 -124px;padding-left:6px;zoom:1;}
    .x-tipcustom .x-tipcustom-mr{background:#FFA801 right -124px;padding-right:6px;zoom:1;}
    .ext-ie .x-tipcustom .x-tipcustom-header,.ext-ie .x-tipcustom .x-tipcustom-tc{font-size:0;line-height:0;}
    .x-tipcustom .x-tipcustom-header-text{font:bold 11px tahoma,arial,helvetica,sans-serif;padding:0;margin:0 0 2px 0;color:#444;}
    .x-tipcustom .x-tipcustom-body{font:normal 11px tahoma,arial,helvetica,sans-serif;margin:0!important;line-height:14px;color:#444;padding:0;}
    .x-tipcustom .x-tipcustom-body .loading-indicator{margin:0;}
    .x-tipcustom-draggable .x-tipcustom-header,.x-tipcustom-draggable .x-tipcustom-header-text{cursor:move;}
    #FFA801 = orange color

    Then add this as a baseCls to your tooltip config:
    Code:
        new Ext.ToolTip({
            target: 'tip2',
            html: 'Click the X to close me',
            title: 'My Tip Title',
            autoHide: false,
            closable: true,
            draggable:true,
            baseCls: 'x-tipcustom'
        });
    Which does this:


  7. #7
    Sencha Premium Member
    Join Date
    Sep 2008
    Posts
    710
    Vote Rating
    6
    Bucs is on a distinguished road

      0  

    Default


    Thanks a lot euchiyama, I will give that a shot.

  8. #8
    Sencha User
    Join Date
    Dec 2008
    Location
    France
    Posts
    244
    Vote Rating
    0
    senacle is on a distinguished road

      0  

    Default


    I've found how to change all the background color of tooltips.
    Test under Extjs 3.4

    In the ext-all.css file, you can find :

    Code:
    .x-tip .x-tip-tc, .x-tip .x-tip-tl, .x-tip .x-tip-tr, .x-tip .x-tip-bc, .x-tip .x-tip-bl, .x-tip .x-tip-br, .x-tip .x-tip-ml, .x-tip .x-tip-mr {
        background-image: url(../images/default/qtip/tip-sprite.gif);
    }
    So, the color in the tooltip comes from the image "tip-sprite.gif".

    You must copy this image, edit, change to the color you wish, save it (i've saved in png format).

    Then, in your own css file, you put :

    Code:
    .x-tip .x-tip-tc, .x-tip .x-tip-tl, .x-tip .x-tip-tr, .x-tip .x-tip-bc,  .x-tip .x-tip-bl, .x-tip .x-tip-br, .x-tip .x-tip-ml, .x-tip .x-tip-mr {
        background-image: url(path/to/your/image/tip-sprite.png);
    }
    Be careful to put your own css file after the ext css file in the header :

    Code:
    <html>
        <head>
            <TITLE>title</TITLE>
            <META HTTP-EQUIV="Content-Type" content="text/html;charset=ISO-8859-15">
            <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
            <link rel="icon" type="image/png" href="icone.gif">
    
            <link rel="stylesheet" type="text/css" href="path/to/Extjs/resources/css/ext-all.css">
            <link rel="stylesheet" type="text/css" href="path/to/your/own/css/style.css">