Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Apr 2007
    Posts
    160
    Vote Rating
    0
    vladsch is on a distinguished road

      0  

    Default [OPEN-1244] Tooltip wrong align

    [OPEN-1244] Tooltip wrong align


    Hi,

    It seems that tooltips cannot align correctly if the widget near browser edge
    Here is test sample (ExtJS 3.3.0)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>	
    	<title>Tooltips seemingly without auto edge detection</title>
        <style type="text/css">
            body { font:9pt/1.68 verdana, sans-serif; padding:1em; }
            p { padding-top:1em; }
        </style>
    	
    	<!-- Place here ExtJS toolkit resources -->
    	
    	<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
     	<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../../ext-all.js"></script>
    	
    	<script type="text/javascript">
    		Ext.onReady(function () {
    			Ext.QuickTips.init();
    			new Ext.Viewport({
    				id: "ViewPort1",
    				items: {
    					id: "Panel1",
    					bbar: {
    						id: "BottomBarToolBar1",
    						xtype: "toolbar",
    						items: [{
    							id: "Button1",
    							text: "Tooltip should render above this button"
    						},
    						{
    							xtype: "tbfill"
    						},
    						{
    							id: "Button2",
    							text: "Tooltip should render above and to left of button"
    						}]
    					},
    					tbar: {
    						id: "Toolbar1",
    						xtype: "toolbar",
    						items: [{
    							id: "Button3",
    							text: "This one is fine"
    						},
    						{
    							xtype: "tbfill"
    						},
    						{
    							id: "Button4",
    							text: "This should show tooltip to left"
    						}]
    					},
    					contentEl: "Panel1_Content"
    				},
    				layout: "fit"
    			});
    			new Ext.ToolTip({
    				id: "Tooltip3",
    				width: 200,
    				title: "Tooltip Title",
    				contentEl: "Tooltip3_Content",
    				target: "Button3"
    			});
    			new Ext.ToolTip({
    				id: "Tooltip4",
    				width: 200,
    				title: "Tooltip Title",
    				contentEl: "Tooltip4_Content",
    				constrainPosition: true,
    				target: "Button4"
    			});
    			new Ext.ToolTip({
    				id: "Tooltip1",
    				width: 200,
    				title: "Tooltip Title",
    				contentEl: "Tooltip1_Content",
    				constrainPosition: true,
    				target: "Button1"
    			});
    			new Ext.ToolTip({
    				id: "Tooltip2",
    				width: 200,
    				title: "Tooltip Title",
    				contentEl: "Tooltip2_Content",
    				constrainPosition: true,
    				target: "Button2"
    			});
    		});
    	</script>
    </head>
    <body>    
    	<div id="Tooltip3_Content" class="x-hidden">
            <p>Tooltip content shows up normally</p>
        </div>
    	
    	<div id="Tooltip4_Content" class="x-hidden">
            <p>This tooltip will get shown on the right and get cut off. It should automatically show on the left but doesn't.</p>
        </div>
    
    	<div id="Tooltip1_Content" class="x-hidden">
            <p>Tooltip content goes here and should automatically appear above button, not covering it</p>
        </div>
    
    	<div id="Tooltip2_Content" class="x-hidden">
            <p>Tooltip content goes here and should automatically appear above button (not covering it) and to the left of the window</p>
        </div>
    
    	<div id="Panel1_Content" class="x-hidden">
            <p>It looks like in ExtJS 3.3.0, you need constrainPosition : true on the tooltips</p>  
            <p>In ExtJS 2.3.0, you didn't need to put that and it would correctly constrain.</p>  
            <p>However, problem still remains that tooltips in the bottom bar, although now visible, cover their buttons, possibly because they are still being offset from the bottom of the button, not top.</p>
        </div>
    </body>
    </html>
    P.S. Also the tooltip's anchor is lost on second tooltip showing (if set anchorToTarget="false" and achor)

  2. #2
    Sencha - Sencha Touch Dev Team Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    19
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Thank you for the report.

  3. #3
    Sencha User
    Join Date
    May 2009
    Posts
    18
    Vote Rating
    0
    anupkshah is on a distinguished road

      0  

    Default


    Hi,

    Just wondering if there's any update for this?

    Thanks!

  4. #4
    Ext JS Premium Member
    Join Date
    Apr 2010
    Posts
    3
    Vote Rating
    0
    farmalay is on a distinguished road

      0  

    Default


    Even if the constrainPosition is set to true, the tooltip is positioned off screen if trackMouse is also set to true. To fix it I changed Tooltip.onMouseMove as follows (changes are in bold):

    Code:
     
     
    Ext.override(Ext.ToolTip, {
     
      onMouseMove : function(e){
          var t = this.delegate ? e.getTarget(this.delegate) : this.triggerElement = true;
          if (t) {
              this.targetXY = e.getXY();
              if (t === this.triggerElement) {
                  if(!this.hidden && this.trackMouse){
                     var xy = this.getTargetXY();
                     if(this.constrainPosition){
                          xy = this.el.adjustForConstraints(xy);
                      }
     
                      this.setPagePosition(xy);
                  }
              } else {
                  this.hide();
                  this.lastActive = new Date(0);
                  this.onTargetOver(e);
              }
          } else if (!this.closable && this.isVisible()) {
              this.hide();
          }
      }    
    });

Similar Threads

  1. [OPEN-93] Documentation have wrong search index
    By mrsunshine in forum Sencha Touch 1.x: Bugs
    Replies: 2
    Last Post: 2 Nov 2010, 2:19 AM
  2. Align tooltip text
    By daiei27 in forum Ext 3.x: Help & Discussion
    Replies: 4
    Last Post: 6 Apr 2010, 12:05 PM
  3. Replies: 5
    Last Post: 2 Dec 2009, 12:36 AM
  4. [2.0.2][FIXED] IE7 wrong display of tooltip-border
    By wuschba in forum Ext 2.x: Bugs
    Replies: 5
    Last Post: 14 May 2008, 6:02 AM
  5. [3.0] Toolbar align selection wrong
    By Animal in forum Ext 2.x: Bugs
    Replies: 2
    Last Post: 30 Mar 2008, 10:09 AM

Thread Participants: 3

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar