ToolTip positioning

Hello

I try to display a ToolTip customized when you use the reversal of a Textinput event, so I have this code:

private var tltMensaje:ToolTip;

protected function txt_Password_rollOverHandler(event:MouseEvent):void
{
var pt:Point = new Point)
event.currentTarget.x,
event.currentTarget.y);

PT = event.currentTarget.contentToGlobal (pt);

tltMensaje = ToolTipManager.createToolTip ("MyMessage",
PT.x + event.currentTarget.width,
PT.y, 'errorTipRight') as ToolTip;
}

The Textinput is inside a Panel and the toottip does not appear next to the Textinput

Img1.png

I want to know is if there is a way to display the ToolTip beside the Textinput like this

Img2.png

Thank you

Alberto

Hello

I had a problem like this. I used:

PT = event.currentTarget.parent.contentToGlobal (pt);

All the best

Tags: Flex

Similar Questions

  • Furniture Popup and ToolTip, positioning of the questions...

    Hi all

    I have a dragable popup panel that contains a form. I want to use tooltips for validation in the field, however, I'm having a hard time finding how to position the ToolTip so that it remains with the respective input box while the popup panel is moved. Any ideas?

    Thank you!

    ~ Mike

    Check the popup example in this post

    http://flexdevtips.blogspot.com/2009/08/always-showing-error-tips-validators.html

  • How to position spry ToolTip with a div instead of the top left of the page

    I changed the java script to a spry leading position of tool in the top left of my page.  I need to be placed in a position defined by the top left of a div instead, so it always appears in the same place regardless of the size of the screen or browser.  Any ideas?  That's what I changed to get the default value of positioning of the cursor position:

    Change SpryTooltip.js line 211:

    From:

    Spry.Widget.Utils.putElementAt (this.tooltipElement, this.pos, {x: this.offsetX, y: this.offsetY}, true);

    TO:

    Spry.Widget.Utils.putElementAt (this.tooltipElement, {x: this.offsetX, y: this.offsetY}, true);

    This does not take into account the position of the mouse and uses only shifts to set the fixed position...

    Here is a link to what I'm working on.  The forklift upper center is the element that so far, I've built that has the ToolTip overview.

    http://fallswayrents.com/indexHover.html

    Thank you!  Mike

    Line 65 of the HTML:

    $('.tooltip').hover (function () {}

    who to change:

    {$('.tooltip__#topcenter__').hover (function ()}

    As all the info-bubbles-containers have a class .tooltip, the previous code displays the 2 other ToolTips too since we did not have a defined tag.

  • Position of the ToolTip (TitleWindow)

    Hello

    I added tooltips to some titleWindows.  Is there a way to control the position of the ToolTip?

    Thank you.

    When you use the Currenttooltip to create a custom ToolTip, you specify the coordinates of the ToolTip on the stage. You do this by specifying the values of the

    x and y parameters of the new ToolTip in the createToolTip() method. These coordinates are relative to the stage. For example, a value of 0,0 creates a ToolTip in the upper left corner of the application.

  • Select curve chart WPF and nickname of curve in the ToolTip

    Hello

    How can I do, view the name of curve in the ToolTip, if I moved the mouse over the curve?
    Or view the name of curve staring above the curve?
    And, how can I select a curve with the click of a mouse?
    Possible?

    Kind regards
    Tamas

    P.S.: Community VS2013 & MS2015 Standard

    Using the logic of tool tip of the point value of graphic display WPF overviewand the GetPlotAt function, here's an example that uses mouse clicks to select tracks in a chart:

    partial class MainWindow: Window {}
    

    _selectedPlot of private land;
    

    public MainWindow () {}
    
        InitializeComponent ();
    

    Tour (option) on the hit test for lines, in addition to the actual data.
    
        Graph HitTestMode in the Group PlotHitTestMode.RenderedInterpolation;
    

    Updated tooltips to display quickly and for a long time.
    
        ToolTipService.SetInitialShowDelay (graph, 0);
    
        ToolTipService.SetShowDuration (graph, int. MaxValue);
    

    Fill in the chart with the data and the locations of the example.
    
        Graph BeginInit ().
    
        var plotBrushes = new [] {Brushes.Red, Brushes.Orange, Brushes.Green, Brushes.Blue ;}
    
        < plotbrushes.length;="" ++i="" )="">
    
            label As String = "Plot" + (i + 1);
    
            rendering engine of var = new LinePlotRenderer {Stroke = plotBrushes [i]};
    
            var field = new plot (label) {Renderer = renderer};
    
            Graph Plots.Add (field);
    

    Graph data [i] = new [] {i, i + 1};
    
        }
    
        Graph EndInit ().
    

    Monitor the plot area of the chart for mouse clicks.
    
        Graph. PlotAreaMouseLeftButtonDown += OnPlotAreaMouseLeftButtonDown;
    
    }
    

    private void OnPlotAreaMouseLeftButtonDown (object sender, MouseButtonEventArgs e) {}
    
        Check if a new route has been shown at the current position.
    
        Point ScreenPosition = e.GetPosition (graph);
    
        field var graphics = (Plot). GetPlotAt (screenPosition);
    
        If (plot == null | plot == _selectedPlot)
    
            return;
    

    Deselect the previous plot, if it exists.
    
        If (_selectedPlot! = null) {}
    
            ((LinePlotRenderer) _selectedPlot.Renderer). StrokeThickness = 1.0;
    
            (Graph (ToolTip). Tool - tip). IsOpen = false;
    
        }
    

    Select the new path and display a ToolTip.
    
        _selectedPlot = conspiracy;
    
        ((LinePlotRenderer) plot. Rendering engine). StrokeThickness = 2.0;
    
        Graph ToolTip = new ToolTip {Content = string. Format ('"{0}' selected', plot. Label), IsOpen = true};
    
    }
    
}

    "Display the name of curve staring above the curve", with respect to the simplest approach would be to use a PointAnnotation to display a label to a particular position (probably hiding the target and arrow).

  • WPF graphics, display plot marker (with contact information tooltip) on the mouse event

    Hello

    I need display the coordinates of the point of the field when the mouse pointer is positioned top/close to him.

    I already display a ToolTip with coordinates using the code in this LINK (works equally well for graph).

    However, it is not easy to see where the field is selected, especially when you have more than one land close to eachother.  Is there a way to display some sort of a 'marker '?  A bit of as Signal Analyzer?

    Thank you.

    If you want to display a target and the label next to the value as a user moves the mouse over a graphic, a possibility would be to use SetRelativePosition on a slider.

    If you want to just use a marker in the chart and keep the label in the ToolTip, you can set the relative position of a Visual in the Children collection:

    XAML

        

            

                

                ni:Cursor x:Name="cursor" />

                

                Ellipse x:Name="marker" Width="10" Height="10"

                         Stroke="Black" StrokeThickness="2"

                         niPrimitives:RelativePanel.RelativeHorizontalAlignment="Center"

                         niPrimitives:RelativePanel.RelativeVerticalAlignment="Center"

                         />

            

        

    Code

        private void OnPlotAreaMouseMove( object sender, MouseEventArgs e ) {

            IPlot plot = graph.AllPlots[0];

            Point screenPosition = graph.GetPlotAreaPosition( e );

            Point relativePosition = graph.ScreenToRelative( screenPosition );

    // Option 1

            cursor.SetRelativePosition( relativePosition );

    // Option 2

            PlotValue nearestValue = graph.FindNearestValue( plot, relativePosition, query );

            if( nearestValue != null ) {

                graph.ToolTip = string.Format(

                    "Nearest value is at ({0},{1}).",

                    nearestValue.Value.Cast( ).ToArray( ) );

    Point nearestValuePosition = nearestValue.GetRelativePosition( );

                RelativePanel.SetRelativeHorizontalPosition( marker, nearestValuePosition.X );

                RelativePanel.SetRelativeVerticalPosition( marker, nearestValuePosition.Y );

            }

        }

  • ToolTip on a Panel covered by another control panel.

    I asked this question before but I try again.

    Is there no workaround solution so that the ToolTip can be displayed when the location where displays the ToolTip which is normally covered by another Panel?

    I control the position to both left/right instead of below?

    I have not seen your previous question... (and of course you again no questions...)

    In any case, using the built-in ToolTips, the answer is NO, you can't. The ToolTip is a panel floating with a given, position determined by the control, that it belongs to, so tooltips (a) may be covered by other panels and b) the position of the ToolTips is fixed.

    You can offer it as a new feature...

  • ToolTip on a GUI Ancrable

    Hello world

    I just create the attachable GUI with pictos (not text) and my users, I would like to have a ToolTip on turnover of the mouse to display the name of each function.

    Here's my menu

    {

    function myScript(thisObj) {

         function myScript_buildUI(thisObj) {

              var myPanel = (thisObj instanceof Panel) ? thisObj : new Window("palette", "Menu Pitchy", undefined, {resizeable:true});

              res="group{orientation:'column',\

                   myPanel1: Panel{text:'Mises à jour', orientation:'row',\

                        myButton01: IconButton{text:'Mise à jour complète', tooltipActive:'Mise à jour complète', image:'D:/PITCHY/Scripts/Images/All.png'},\

                        myButton02: IconButton{text:'Vidéo', image:'D:/PITCHY/Scripts/Images/Video.png'},\

                        myButton03: IconButton{text:'Lignes Text', image:'D:/PITCHY/Scripts/Images/Lignes.png'},\

                        myButton04: IconButton{text:'Info Séquence', image:'D:/PITCHY/Scripts/Images/Info.png'},\

                   },\

                   myPanel2: Panel{text:'Débug', orientation:'row',\

                        myButton05: IconButton{text:'Layer Style', image:'D:/PITCHY/Scripts/Images/Layer.png'},\

                        myButton06: IconButton{text:'Disable Null', image:'D:/PITCHY/Scripts/Images/Null.png'},\

                        myButton07: IconButton{text:'Code Camembert', image:'D:/PITCHY/Scripts/Images/Codecam.png'},\

                        myButton08: IconButton{text:'Code Position line1', image:'D:/PITCHY/Scripts/Images/Posline.png'},\

                   },\

                   myPanel3: Panel{text:'Réglages', orientation:'row',\

                        myButton09: IconButton{text:'Rescale Bloc', image:'D:/PITCHY/Scripts/Images/Rbloc.png'},\

                        myButton10: IconButton{text:'Rescale Ligne', image:'D:/PITCHY/Scripts/Images/Rligne.png'},\

                        myButton11: IconButton{text:'Polices', image:'D:/PITCHY/Scripts/Images/Polices.png'},\

                   },\

                   myPanel4: Panel{text:'Tests', orientation:'row',\

                        myButton12: IconButton{text:'Text 40 car.', image:'D:/PITCHY/Scripts/Images/T40.png'},\

                        myButton13: IconButton{text:'Text 120 car.', image:'D:/PITCHY/Scripts/Images/T120.png'},\

                        myButton14: IconButton{text:'Time Stretch', image:'D:/PITCHY/Scripts/Images/Time.png'},\

                   },\

              }";

              myPanel.grp = myPanel.add(res);

             

              /*---- My buttons settings ----*/

              return myPanel; }

        

         var myScriptPal = myScript_buildUI(thisObj);

        

         if(myScriptPal != null && myScriptPal instanceof Window)

         { myScriptPal.center(); myScriptPal.show(); }

    }

    myScript(this);

    }

    Hello

    You can add .helpTip to your buttons. For example:

    myButton.helpTip = "Function description";

  • AF:inputtext change the color of the text on pressure from button and the position of the caret

    Hi all

    Very green, when it comes to ADF so I hope to give you enough information to get assistance.

    I found a 2008 document that created Frank Nimphius that shows how the JavaScript in the ADF and the manipulation of the inline style property.

    It is titled "ADF Code corner 010. How to create a character counter of entry for text fields.

    While my use case is not the same I feel that I could use for my use case logic.

    My use case is that the user wants a text field to replace the blue color when being typed in so that they know what they changed.

    I'm jusing JDeveloper 12.1.2

    That's what I have my input text looks like:

    <af:column sortProperty="#{bindings.ChiefScaleOrderVO.hints.OrderNo.name}" filterable="true"
                               sortable="true" headerText="#{bindings.ChiefScaleOrderVO.hints.OrderNo.label}" id="c1"
                               width="11%" inlineStyle="#{recordManager.columnStyle}">
                      <af:inputText value="#{row.bindings.OrderNo.inputValue}"
                                    label="#{bindings.ChiefScaleOrderVO.hints.OrderNo.label}"
                                    columns="#{bindings.ChiefScaleOrderVO.hints.OrderNo.displayWidth}"
                                    maximumLength="#{bindings.ChiefScaleOrderVO.hints.OrderNo.precision}"
                                    shortDesc="#{bindings.ChiefScaleOrderVO.hints.OrderNo.tooltip}" id="it1"
                                    autoSubmit="true" valueChangeListener="#{recordManager.columnTextModified}"
                                    clientComponent="true">
                        <af:clientListener method="keyInput" type="keyPress"/>
                        <f:validator binding="#{row.bindings.OrderNo.validator}"/>
                      </af:inputText>
                    </af:column>

    This is what looks like my javascript:

    <af:resource type="javascript">
       function keyInput(evt){
          //document.getElementById(evt.getSource().getClientId() + '::content').style.color = 'blue';
          textfield = evt.getCurrentTarget();
          textfield.setInlineStyleProperty("color","blue");
       }
</af:resource>

    If I do an alert (textfield.getInlineStyleProperty("color")); before and after the the setInlineStyleProperty it does not say it gets the value at the blue, but my text color never changes.

    If I do the document.getElementById (evt.getSource () .getClientId () + ': content ""). style.color = "blue"; It works, but I'm doing things the "right way".

    So is there another way to do this now in 12 JDeveloper?

    Also is there anyway to when you click inside an af:inputText that he will not select all of the text and just position the cursor at the end?

    Thank you

    Derek Hansen

    Well, you try to set the wrong property.

    According to your example of "pure" javascript, you must set contentStyle and not inlineStyle.

    Then try something like: textfield.setContentStyle ("color: Blue");

    Dario

  • ToolTip for the interactive report column data item

    I have a report that includes the column (CURRENT_UNIT). I would like to be able to add a "ToolTip". I did it before using a classic report by the following (borrowed from another one of the APEX):

    Add this CSS

    {a.rapxxx}

    position: relative;

    z index: 24;

    {text-decoration: none}

    a.rapxxx:hover {z-index: 25; background-color: #ff0}

    a.rapxxx span {display: none}

    duration of a.rapxxx:hover {/ * poster only over time: hover state * /}

    Display: block;

    position: absolute;

    top:-20px;

    Left: 20px;

    Width: 20em;

    border: 1px blue solid dark;

    text-align: center;

    background-color: lightyellow;

    color: Blue;

    }

    And on the SHAPE of COLUMN layout, add this:

    < a href = "#" class = "rapxxx" > #CURRENT_UNIT # < span > #UNIT_NM # </span > < /a >

    But when I try it on the interactive report, I don't get the hover tooltip.  The href attribute is displayed correctly, just, I don't get the value of the span.

    Can someone help me please?

    Using APEX 4.2.3

    Internet Explorer version 9

    Thank you

    -Seattle

    Oh, if the column is not a link, just the URL target value #.

  • Position of the cursor in number of field using firefox

    Hello

    I have a problem; When you click a field (in firefox), the cursor will initially and you cannot click anywhere else in the population field unless you use the arrow keys.

    This does not happen with safari, chrome or opera.

    This problem appeared suddenly even on pages that worked very well (and have separate css codes).

    This is one of the scripts pages where there are fields in question. (not sure if its something that I did as I said before, all the pages worked very well that do not link to the same css stylesheet).

    <? php require_once('Connections/drama_database.php');? >

    <? PHP

    If (! function_exists ("GetSQLValueString")) {}

    function GetSQLValueString ($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")

    {

    If (via PHP_VERSION < 6) {}

    $theValue = get_magic_quotes_gpc()? stripslashes ($TheValue): $theValue;

    }

    $theValue = function_exists ("mysql_real_escape_string")? mysql_real_escape_string ($TheValue): mysql_escape_string ($theValue);

    Switch ($theType) {}

    case 'text ':

    $theValue = ($theValue! = "")? « " ». $theValue. "" "": "NULL";

    break;

    case "long":

    case "int":

    $theValue = ($theValue! = "")? intval ($TheValue): 'NULL ';

    break;

    case "double":

    $theValue = ($theValue! = "")? doubleVal ($TheValue): 'NULL ';

    break;

    case "date":

    $theValue = ($theValue! = "")? « " ». $theValue. "" "": "NULL";

    break;

    case "set":

    $theValue = ($theValue! = "")? $theDefinedValue: $theNotDefinedValue;

    break;

    }

    Return $theValue;

    }

    }

    $editFormAction = $_SERVER ['PHP_SELF'];

    If (isset {}

    $editFormAction. = « ? ». htmlentities($_SERVER['QUERY_STRING']);

    }

    If ((isset($_POST["MM_update"])) & & ($_POST ["MM_update"] == "profile_update")) {}

    $updateSQL = sprintf ("set a DAY to users SET username = %s, password = %s, firstname = %s, lastname = %s, email = %s, userlevel = WHERE id = %s %s",

    GetSQLValueString ($_POST ['username_field'], "text").

    GetSQLValueString ($_POST ['password_field'], "text").

    GetSQLValueString ($_POST ['firstname_field'], "text").

    GetSQLValueString ($_POST ['lastname_field'], "text").

    GetSQLValueString ($_POST ['email_field'], "text").

    GetSQLValueString ($_POST ['userlevel_field'], "int").

    GetSQLValueString ($_POST ['id'], "int"));

    @mysql_select_db ($database_drama_database, $drama_database);

    $Result1 = mysql_query ($updateSQL, $drama_database) or die (mysql_error ());

    $updateGoTo = "admin_user_management.php";

    If (isset {}

    $updateGoTo. = (strpos ($updateGoTo, '?'))? « & » : « ? » ;

    $updateGoTo. = $_SERVER ['QUERY_STRING'];

    }

    header (sprintf ("location: %s", $updateGoTo));

    }

    $colname_userprofile = "-1";

    If (isset($_GET['id'])) {}

    $colname_userprofile = $_GET ['id'];

    }

    @mysql_select_db ($database_drama_database, $drama_database);

    $query_userprofile = sprintf ("" SELECT * FROM users WHERE id = %s ", GetSQLValueString ($colname_userprofile,"int")");

    $userprofile = mysql_query ($query_userprofile, $drama_database) or die (mysql_error ());

    $row_userprofile = mysql_fetch_assoc ($userprofile);

    $totalRows_userprofile = mysql_num_rows ($userprofile);

    If (! isset {})

    session_start();

    }

    ? >

    <! doctype html >

    < html >

    <! - Favicon - >

    < link rel = "shortcut icon" type = "image/png" href = "images/icon.png" / > "

    < link href = "SpryAssets/SpryValidationSelect.css" rel = "stylesheet" type = "text/css" > "

    < script src = "SpryAssets/SpryValidationSelect.js" type = "text/javascript" > < / script > "

    < head >

    < meta charset = "utf-8" >

    < title > updated the user < /title > profile

    < style type = "text/css" >

    {body

    margin: 0px;

    background-image: url(images/theatre.jpg);

    background-position: Center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    background-size: cover;

    background-color: white;

    / * Transitions * /.

    -webkit-transition: none! important;

    -moz-transition: none! important;

    -ms-transition: none! important;

    -o - transition: none! important;

    transition: none! important;

    }

    {.form_area}

    background-color: #5fa0c0;

    height: auto;

    Width: 400 PX;

    left: 50%;

    margin left:-200px;

    margin-top: 0px;

    position: absolute;

    padding-top: 20px;

    margin-bottom :-auto 1px;

    box-shadow: 0px 10px 30px 5px #000000;

    z-index: 1;

    }

    {.form_field}

    padding-top: 10px;

    padding-bottom: 10px;

    padding-right: 80px;

    padding-left: 50px;

    }

    {.form_fielddw}

    padding-top: 10px;

    padding-bottom: 10px;

    padding-right: 50px;

    padding-left: 50px;

    }

    {.info_field}

    padding-top: 10px;

    padding-bottom: 10px;

    padding-right: 50px;

    padding-left: 50px;

    do-family: "Slabo 27px", serif;

    color: white;

    }

    {.username_field}

    Width: 100%;

    height: 30px;

    do-family: "Slabo 27px", serif;

    do-size: 18px;

    padding-left: 30px;

    border: none;

    border-radius: 5px;

    background-image: url(images/icons/silhouette78.png);

    background-repeat: no-repeat;

    background-position: left top of page 5px 5px;

    }

    {.password_field}

    Width: 100%;

    height: 30px;

    do-family: "Slabo 27px", serif;

    do-size: 18px;

    padding-left: 30px;

    border: none;

    border-radius: 5px;

    background-image: url(images/icons/closed.png);

    background-repeat: no-repeat;

    background-position: left top of page 5px 5px;

    }

    {.firstname_field}

    Width: 100%;

    height: 30px;

    do-family: "Slabo 27px", serif;

    do-size: 18px;

    padding-left: 30px;

    border: none;

    border-radius: 5px;

    background-image: url(images/icons/silhouette78.png);

    background-repeat: no-repeat;

    background-position: left top of page 5px 5px;

    }

    {.lastname_field}

    Width: 100%;

    height: 30px;

    do-family: "Slabo 27px", serif;

    do-size: 18px;

    padding-left: 30px;

    border: none;

    border-radius: 5px;

    background-image: url(images/icons/silhouette78.png);

    background-repeat: no-repeat;

    background-position: left top of page 5px 5px;

    }

    {.email_field}

    Width: 100%;

    height: 30px;

    do-family: "Slabo 27px", serif;

    do-size: 18px;

    padding-left: 30px;

    border: none;

    border-radius: 5px;

    background-image: url(images/icons/close13.png);

    background-repeat: no-repeat;

    background-position: left albums 5px 6px;

    }

    {.userlevel_dwfield}

    Width: 270px;

    height: 30px;

    do-family: "Slabo 27px", serif;

    do-size: 18px;

    padding-left: 30px;

    border: none;

    border-radius: 5px;

    -webkit-appearance: none;

    -moz-appearance: none;

    background-image: url(images/icons/key162.png);

    background-repeat: no-repeat;

    background-position: left albums 5px 6px;

    cursor: pointer;

    }

    {.update_button}

    Width: 100%;

    background-color: #406c8a;

    border-left: 3px white;

    border-right: 3px white;

    border-bottom: 3px white;

    color: white;

    Police-weight: 600;

    font size: 24 PX.

    padding-top: 20px;

    padding-bottom: 20px;

    do-family: "Slabo 27px", serif;

    margin-top: 10px;

    margin-bottom:-2px;

    z-index: 5;

    -webkit-transition: all 0. 2s ease component software snap-in;

    -moz-transition: all 0. 2s ease component software snap-in;

    -o - transition: all 0. 2s ease component software snap-in;

    -ms-transition: all 0. 2s ease component software snap-in;

    transition: all 0. 2s ease component software snap-in;

    cursor: pointer;

    }

    {.update_button:hover}

    background-color: #1c2d39;

    color: white;

    -webkit-transition: all 0. 2s ease component software snap-in;

    -moz-transition: all 0. 2s ease component software snap-in;

    -o - transition: all 0. 2s ease component software snap-in;

    -ms-transition: all 0. 2s ease component software snap-in;

    transition: all 0. 2s ease component software snap-in;

    }

    {.update_button: active}

    background-color: white;

    color: #1c2d39;

    -webkit-transition: all 0s facilitated;

    -moz-transition: all 0s facilitated;

    -o - transition: all 0s facilitated;

    -ms-transition: all 0s facilitated;

    transition: all 0s facilitated;

    }

    / * ToolTip * /.

    {a.tooltips}

    position: relative;

    display: inline;

    }

    a.ToolTips span {}

    position: absolute;

    Width: 140px;

    color: #FFFFFF;

    do-family: "Slabo 27px", serif;

    background: #1C2D39;

    height: 30px;

    line-height: 30px;

    text-align: center;

    visibility: hidden;

    border-radius: 2px;

    box-shadow: 0px 0px 5px #000000;

    }

    a.ToolTips duration: after {}

    content: ";

    position: absolute;

    top: 50%;

    right: 100%;

    margin-top:-8px;

    Width: 0; height: 0;

    border-right: 8px solid #1C2D39;

    border-top: 8px solid transparent;

    border-bottom: 8px solid transparent;

    }

    a:hover.ToolTips span {}

    visibility: visible;

    opacity: 0.9;

    left: 100%;

    top: 50%;

    margin-top:-15px;

    margin left: 15px;

    z index: 999;

    }

    : - webkit - entry-placeholder {color: #666 ;}}

    : - moz - placeholder {color: #666 ;} / * firefox 19 + * /}

    : - ms - entry-placeholder {color: #666 ;} / * ie * /}

    entry: - moz - placeholder {color: #666 ;}}

    {.dwfield_icon}

    float: left;

    position: absolute;

    display: inline-block;

    padding-top: 5px;

    padding-left: 5px;

    }

    < / style >

    < link href = "stylesheets/main_stylesheet.css" rel = "stylesheet" type = "text/css" > "

    < link href = "stylesheets/header_stylesheet.css" rel = "stylesheet" type = "text/css" > "

    < link href = "SpryAssets/SpryValidationTextField.css" rel = "stylesheet" type = "text/css" > "

    < link href = "SpryAssets/SpryValidationPassword.css" rel = "stylesheet" type = "text/css" > "

    < script src = "SpryAssets/SpryValidationTextField.js" type = "text/javascript" > < / script > "

    < script src = "SpryAssets/SpryValidationPassword.js" type = "text/javascript" > < / script > "

    < / head >

    < body >

    < div class = "header_gap" >

    < div class = "header" >

    <? PHP include ("_header.php");? >

    < / div >

    < / div >

    < div class = "Heading1" >

    User profile update < / div >

    < do action = "<?" PHP echo $editFormAction;? ">" name = "profile_update" method = "POST" class = "form_area" >

    < div class = "form_field" > < span id = "sprytextfield1" >

    < label for = "username_field" > < / label >

    < a class = "tooltips" href = "#" >

    < Entry autofocus = "autofocus" type = "text" name = "username_field" id = "username_field" class = "username_field" placeholder = "Username" = value "<?" PHP echo $row_userprofile ['username'];? > "> < span > username </span > < /a >."

    < span class = "textfieldRequiredMsg" > please enter a user name </span > < / span >

    < / div >

    < div class = "form_field" > < span id = "sprypassword1" >

    < label for = "password_field" > < / label >

    < a class = "tooltips" href = "#" >

    < input type = "password" name = "password_field" id = "password_field" class = "password_field" placeholder = "Password" value = "<?" PHP echo $row_userprofile ["password"];? > "> < span > password </span > < /a >"

    < span class = "passwordRequiredMsg" > please enter a password for </span > < span class = "passwordInvalidStrengthMsg" > must contain a capital letter and a number of 4 to 20 characters long </span > < span class = "passwordMinCharsMsg" > must be 4 to 20 characters long </span > < span class = "passwordMaxCharsMsg" > must be 4 to 20 characters long </span > < / span >

    < / div >

    < div class = "form_field" >

    < span id = "sprytextfield3" >

    < label for = "firstname_field" > < / label >

    < a class = "tooltips" href = "#" >

    < input type = "text" name = "firstname_field" id = "firstname_field" class = "firstname_field" placeholder = "First name" value = "<?" PHP echo $row_userprofile ['firstname'];? > "> < span > name </span > < /a >"

    < span class = "textfieldRequiredMsg" > please enter your first name </span > < / span >

    < / div >

    < div class = "form_field" >

    < span id = "sprytextfield4" >

    < label for = "lastname_field" > < / label >

    < a class = "tooltips" href = "#" >

    < input type = "text" name = "lastname_field" id = "lastname_field" class = "lastname_field" placeholder = "Last Name" = value "<?" PHP echo $row_userprofile ["lastname"];? > "> < span > name </span > < /a >"

    < span class = "textfieldRequiredMsg" > please enter your family name </span > < / span >

    < / div >

    < div class = "form_field" >

    < span id = "sprytextfield5" >

    < label for = "email_field" > < / label >

    < a class = "tooltips" href = "#" >

    < input type = "text" name = "email_field" id = "email_field" class = "email_field" placeholder = "Email" value = "<?" PHP echo $row_userprofile ['email'];? > "> < span > e-mail </span > < /a >"

    < span class = "textfieldRequiredMsg" > please enter your email </span > < span class = "textfieldInvalidFormatMsg" > please enter a valid e-mail </span > < / span >

    < / div >

    < div class = "form_fielddw" >

    < span id = "spryselect1" >

    < label for = "userlevel_field" > < / label >

    < select name = "userlevel_field" id = "userlevel_field" class = "userlevel_dwfield" >

    < option value = "-1" > - < / option >

    < option value = "0" > user < / option >

    < option value = "1" > moderator < / option >

    < option value = "2" > Admin < / option >

    "< / select > < div class ="dwfield_icon"> < a class ="tooltips"href =" # "> < img src="images/icons/1424209630__dropdown.png "width ="20"height ="20"> < span > drop </span > < /a > < / div >

    < span class = "selectInvalidMsg" > please select the access level of the user </span > < span class = "selectRequiredMsg" > please select the access level of the user </span > < / span >

    < / div >

    < / div >

    < div class = "info_field" > ID: <? PHP echo $row_userprofile ['id'];? > < br >

    Date of Reg: <? PHP echo $row_userprofile ['regdate'];? > < br >

    < / div >

    < name of the button = "login" type = 'submit' class = "update_button" > update profile < / button >

    < input name = "id" type = "hidden" id = 'hiddenField' value = "<?" PHP echo $row_userprofile ['id'];? > ">"

    < input type = "hidden" name = "MM_update" value = "profile_update" >

    < / make >

    < script type = "text/javascript" >

    var sprytextfield1 = new Spry.Widget.ValidationTextField ("sprytextfield1", "none", {validateOn:["blur"]});})

    var sprytextfield3 = new Spry.Widget.ValidationTextField ("sprytextfield3", "none", {validateOn:["blur"]});})

    var sprytextfield4 = new Spry.Widget.ValidationTextField ("sprytextfield4", "none", {validateOn:["blur"]});})

    var sprytextfield5 = new Spry.Widget.ValidationTextField ("sprytextfield5", "email", {validateOn:["blur"]});})

    var sprypassword1 = new Spry.Widget.ValidationPassword ("sprypassword1", {validateOn: ["blur"], minUpperAlphaChars:1, minNumbers:1, minChars:4, maxChars:20});})

    var spryselect1 = new Spry.Widget.ValidationSelect ("spryselect1", {invalidValue: "-1"});

    < /script >

    < / body >

    < / html >

    <? PHP

    mysql_free_result ($UserProfile);

    ? >

    Thank you!

    So I found the problem:

    After testing and narrowing of the question, I found that the href = "#" in each entry form was the problem. I only am not sure as to why, but removing the tag href as the problem has been resolved.

  • Point ToolTip not solid background

    I created a ToolTip using CSS and #CUSTOM_ITEM_HELP_TEXT # to create tooltips to point (I followed a demo hosted by Tyson Junglet/Dan McGhan 2012 presentation of Skillsbuilder).

    It consists of the following CSS:

    < style >
    . ToolTip {}
    Cursor: help;
    text-decoration: none;
    position: relative;
    color: #5555; 555
    }
    . ToolTip span {}
    margin left:-999em;
    position: absolute;
    }
    . ToolTip:hover span {}
    border-radius: 5px 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 5px 5px 5px rgba (0, 0, 0, 0.1);
    -webkit-box-shadow: 5px 5px rgba (0,0,0,0.1);
    -moz-box-shadow: 5px 5px rgba (0,0,0,0.1);
    do-family: Calibri, Tahoma, Geneva, without serif.
    position: absolute; left: 1em; Top: 1em; z-index: 99;
    left margin: 0; Width: 250px;
    color: #3333; 333
    white-space: normal;
    text-decoration: none;
    opacity: 2.0;
    Filter:alpha(opacity=200); / * For IE8 and below * /.

    }
    {.custom_help}
    background: #8FC4D6; #9FDAEE;
    border: 1px solid #2BB0D7;
    padding: 0.8em 1em;
    text-align: left;
    text-decoration: none;
    }
    < / style >

    declared in the header of the page text

    I then use two models of label (you need one) and the other for optional:

    Required label template:

    Before the label:

    "< img src="#IMAGE_PREFIX#themes/theme_2/images/required.gif "alt =" "#VALUE_REQUIRED #" tabindex = "999" / > < a class = "tooltip" href = "#" tabindex = "-1" > ""

    After the Label:

    < span class = "custom_help" > #CURRENT_ITEM_HELP_TEXT # </span > < /a >

    Model of optional wording:

    Before the label:

    < a class = "tooltip" href = "#" tabindex = "-1" >

    After the Label:

    < span class = "custom_help" > #CURRENT_ITEM_HELP_TEXT # </span > < /a >

    It works very well for 12 of Firefox, but it does not work for IE (I tried IE7 and IE9)

    I have an example of work on the APEX. ORACLE.COM

    Workspace: rgwork

    User: TESTER

    Password: TEST123

    Application: DB APPLICATION (27964)

    Just hover over the label, and you will see the ToolTip planned looks like not solid and transparent in IE 7/9 but that works well in Firefox.

    At work, I use APEX 4.1 with Oracle 10 g Rel 2 and IE 7. (IE 7 is our standard, and we'll go to IE 9 in the coming months)

    Can someone please help me as soon as POSSIBLE. I have an application in production this month.

    Thank you.

    Robert

    http://apexjscss.blogspot.com

    Hello

    I made a few other changes. Here's the new CSS

    .tooltip {
cursor: help;
text-decoration: none;
color: #555555;
}
.tooltip:hover {
position: relative;
}
.tooltip:hover .custom_help{
-webkit-box-shadow: 5px 5px rgba(0,0,0,0.1);
-moz-box-shadow: 5px 5px rgba (0,0,0,0.1);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
font-family: Calibri, Tahoma, Geneva, sans-serif;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
border-radius: 5px 5px;
position: absolute;
left: 1em;
top: 1em;
margin-left: 0;
width: 250px;
color: #333333;
white-space: normal;
text-decoration: none;
display: block;
}
.custom_help {
background-color: #8FC4D6;
border: 1px solid #2BB0D7;
padding: 0.8em 1em;
text-align: left;
text-decoration: none;
display:none;
z-index: 99;
}

    See page app id 69040 3 in your workspace to work properly in Internet Explorer.

    Kind regards

    Jari

  • onMouseOver displays the ToolTip of hidden column of the classic report

    What: The goal:
    Access more information that fits on a single line of the screen without using multiple fixed lines.

    Background:
    Classic report with 18 data elements (columns) visible. At the search box, and the user can choose the number of rows displayed.
    Some data elements can be long (20 to 30 characters) compared to the width of the screen. The element more right data risk of 100 characters.

    Proposed strategy:
    (1) display the n first characters of the item (s) long in the report.
    (2) display the entire item onMouseOver.

    Proposed approach:
    (1) for each column with the data of type long, contain the integer value in a hidden item.
    (2) value of (hidden) long display in tooltips (bubble? / ball?) on this value onMouseOver.

    Note: It is not framed to help/Help for a column but the display of the value of long type for a particular element in the line of a column.

    Search feature:
    (1) to reduce maintenance, wants to set up for several columns using a single common block of code.

    Question:
    In view of the other approaches, you know, it's a good approach to achieve the goal? Alternative approaches?

    Howard

    Well it took some time, and you really made me work for it. :)

    For flight hover end result on the job column Ln Nm.
    http://Apex.Oracle.com/pls/Apex/f?p=991202:1

    I added some old code, I had laying around. It adds a bubble that will stay for 5 seconds or until you click Next or move to another record.

    What I would do at this point, it is simply truncate the length of the Nm long to something short (with a substr). Use any indicator wished to hover. Like for example these glasses it's really up to you.

    You will see there is a PLSQL AJAX callback where you can retrieve and format the content of the pop-up window to everything you want. You can make it real.

    Here's what I did:
    1. the new procedure of ShowJob javascript.

    function ShowJob(pThis,pId){
     this.dTimeout;
      clearTimeout(this.dTimeout);
      this.dGet = dGet;
      this.dShow = dShow;
      this.dCancel = dCancel;
      var get = new htmldb_Get(null,$v('pFlowId'),'APPLICATION_PROCESS=FULL_LONG_NAME',$v('pFlowStepId'));
      this.dGet();
     return;

     function dGet(){
           this.dTimeout = setTimeout("this.dCancel()",6500);
          get.addParam('x01',pId);
           get.GetAsync(dShow);
     }

     function dShow(){
           $x_Hide('rollover');
           if(p.readyState == 1){
           }else if(p.readyState == 2){
           }else if(p.readyState == 3){
           }else if(p.readyState == 4){
                 $x('rollover_content').innerHTML = p.responseText;
                 $x_Show('rollover');

            var l = findPosX(pThis)+pThis.offsetWidth+5;
                 var t = findPosY(pThis);

            $x_Style('rollover','left',l + 'px');
                 $x_Style('rollover','top',t + 'px');

// This math would center on the vertical
//                 $x_Style('rollover','left',findPosX(pThis)+pThis.offsetWidth+5);
//                 $x_Style('rollover','top',findPosY(pThis)-($x('rollover').offsetHeight/2)+($x(pThis).offsetHeight/2));
               document.onclick = function(e){
               dCheckClick(e);
               }
           }else{return false;}
     }
     function dCheckClick(e){
          var elem = html_GetTarget(e);
          try{
                    var lTable = $x_UpTill(elem,"DIV");
                    if(lTable.id!='rollover_content'){dCancel();}
                    else{}
          }catch(err){dCancel();}
     }

     function dCancel(){
           $x_Hide('rollover');
          document.onclick = null;
           get = null;
     }
}

    2 rollover div on the page footer (div id = "reversal"...). Of course, this could also be a region.

    < div id = "reversal" style = "display: none;" color: black; background: #FFF; border: 2px solid #369; width: 290px; position: absolute; padding: 4px; » >
    < div id = "rollover_content" > < / div >
    < / div >

    3 PLSQL AJAX callback. : FULL_LONG_NAME

    -- select your value with apex_application.g_x01

htp.p('You hover over ' || apex_application.g_x01 || '
    ');
htp.p('Here is the Full Long Name: XXXXXXX XXXXXXX XXXXXXX 1234565');

    4 changed the Nm of Long column to have a link with the onmouseover call that calls the new procedure ShowJob. I made the assumption that with the NUM parameter, you could go the full record of what you need.
    onmouseover = "ShowJob(This,#num#) '"

    This should be it.

    Let me know what you think.
    -Jorge

    Published by: jrimblas on April 22, 2013 13:05: added code to validate for the completion

  • Open/close on ToolTips button?

    Is it possible to have a button "open/close"?  I would like to have a tool tip say 'Open' when it is idle, and then say 'close' when they are active.

    Try changing the Position of the composition of the stacked ToolTip which will close 'Part' button to choose. Then change the options to Show and Hide target on click. See if this configuration matches your needs.

    Thank you

    Vinayak

  • Can you please give some advice on the ToolTip used in the new packaged applications

    Hello
    I use apex 4.1 theme 23.
    I would use the ToolTip used in the new packaged app.
    Can you please give some advice or the "Details" on ToolTip, used in the new packaged applications. for example: go live checklist request.
    Once we fly over "Check list items" region. We get the tootip.

    1. how to find the class "detailedStatusList".
    2. how to find "detailedStatusListToolTip();" JavaScript function used in "execute when Page Loads.
    3. is there a tool to generate the source in the region to "check list items.

    I don't know if there are more, I need to know...

    * the tooltip plugin isn't solid...

    Kind regards
    Water

    Good morning, water,

    My goal is to use it in IR for the column notes. I can't show all the notes on the report. so I use RPAD to show only the first words. and the rest should be available by using the ToolTip.

    Fact :D

    You need to use SUBSTR to restrict the notes to a few words, not RPAD.

  • I changed the IR query as follows...

    select
Deptno,
Dname,
Loc,
substr(notes,1,25) || '<div class="long-notes" style="display:none;">'||notes||'
' as "Notes" from "DEPT"

  • Column attributes: Note > formatting of column > Expression HTML

    <div class="short-notes">#Notes#

  • Edit Page > JavaScript > function and global variables declaration

    function setNotesToolTip() {
     this.xOffset = 0; // x distance from mouse
     this.yOffset = 10; // y distance from mouse
jQuery("div.short-notes").hover(
     function(e) {
          var insideText = jQuery("div.long-notes",this).html()
          this.top = (e.pageY + yOffset);
          this.left = (e.pageX + xOffset);
          $('body').append('
    ' + insideText + '
    ' );
          $('div#notes-tooltip').css("top", this.top+"px").css("left", this.left+"px").delay(500).fadeIn("fast");
     },
     function() {
          jQuery("div#notes-tooltip").fadeOut("false").remove();
     }
).mousemove(
     function(e) {
          this.top = (e.pageY + yOffset);
          this.left = (e.pageX + xOffset);
          jQuery("div#notes-tooltip").css("top", this.top+"px").css("left", this.left+"px");
     }
)
}

  • Edit Page > header and footer > footer text

    <style>
div#notes-tooltip {
    background-color: #F8F8F8;
    border: 1px solid #AAAAAA;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
    position: absolute;
    width: 420px;
    padding: 4px;
}
</style>

  • And finally called setNotesToolTip(); while the page is loading. (Run when the Page loads)

    Kind regards
    Hari

    • Maybe you are looking for

    • Disappear several buttons to create the message window after installing Enigmail and GNUpg

      Hello. I decided to install the Thunderbird PGP module (Enigmail). During the installation, it was necessary to install additional software GnuPG. After restart Thunderbird in create message windows several buttons disappear as: fonts, links, etc. (s

    • Skype crashes randomly every few minutes.

      Hello I have problem with my Skype for about month. IM using latest version of Skype. But it crash randomly every 5 to 40mins. It just stop responding. This is the screenshot of my event log. Any help is very apraciated! Thank you Windows 8.1

    • Is there a way to put pictures in an album and remove off moments?

      I have the IPad 9.2.1 version.  I want to put some of my photos in albums but, would like to take off the page "photos".  I do not have duplicates because it takes too much space.  Is there a way to do this? RM

    • Satellite L450 - does not start

      Hello I have a Satellite L450-188 and it has stopped working. I tried to use the reinstallation disc, but it will not recover and didn't tell the dics 0 and 1 no physical drive. Do you know what this means and how I can get around it at all? Thanks e

    • Sub - VI is not enter the loop

      Hi im woring on a project that needs PWM signal with a variable frequency, the thing is the PWM vi works but when I used the PWM as a sub - VI in another program for some reason any apparently did not enter the for loop inside the vi PWM of ideas why