1. #1
    Sencha User
    Join Date
    Mar 2008
    Posts
    5
    Vote Rating
    0
    asb_kumar is on a distinguished road

      0  

    Question Positioning Tooltip

    Positioning Tooltip


    Hi
    I would like to show the tooltips 'confined' within a panel.
    This is what I have.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
            <title>Untitled Document</title>
            <script src="../adapter/ext/ext-base.js"></script>
            <script src="../ext-all-debug.js"></script>
            <link rel="stylesheet" type= "text/css" href="../resources/css/ext-all.css" />
        </head>
        <script>
    
        function 
        createPanel(panelId, panelTitle, panelWidth, panelHeight, panelBorder, 
            panelFrame, panelLayout, panelXPos, panelYPos) {
            var newPanel = new Ext.Panel({
                id : panelId,
                title: panelTitle,
                width : panelWidth,
                height : panelHeight,
                border : panelBorder,
                frame : panelFrame,
                layout : panelLayout,
                x : panelXPos,
                y : panelYPos
            });
            return newPanel;
        }
    
        Ext.onReady(function() {
            var basePanel = createPanel('basePanel',
                "Base Panel", 110, 100, true, true,
                'absolute', 10, 10);
    
            var modelLabel = new Ext.form.Label({
                id: 'modelLabel',
                html: "Label",
                width: 50,
                height: 21,
                x: 5,
                y: 5,
                style: 'font-weight:bold;color:#FABCED;font-size:11;font-family:MS Reference Sans Serif;text-align:center;background-color:black'
            });
            basePanel.add(modelLabel);
            basePanel.render(document.body);
            var tt = new Ext.ToolTip({target: modelLabel.getEl(), 
            html: "myToolTip"});
        });
        </script>
    </html>
    If you see, the tooltip appears beyond the basePanel if you hover your mouse at the end of 'Label' component.
    My question is, Is there any built-in api available to control the tooltip to appear within the borders of the basePanel?

    Help appreciated.

    Regards
    Balaji

  2. #2
    Sencha User
    Join Date
    Mar 2008
    Posts
    5
    Vote Rating
    0
    asb_kumar is on a distinguished road

      0  

    Question Re: Positioning Tooltip

    Re: Positioning Tooltip


    I couldnt find any alternatives.
    Any help appreciated.

    regards
    Balaji

  3. #3
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    You can set the tooltip position yourself, e.g.
    Code:
    var tt = new Ext.ToolTip({
    	target: modelLabel.getEl(),
    	html: "myToolTip",
    	getTargetXY: function() {
    		return this.target.getAnchorXY('bl');
    	}
    });

Thread Participants: 1