title: How to use Selenium WebDriver to access JQuery Tipped tooltip text in a modal dialog box
body: <p><strong>Scenario:</strong>
  Click a button and a jquery modal dialog appears with input fields and cancel/save buttons. When an input field is empty the save button is disabled and when hovered over, its tooltip displays text.</p>
  
  <p><strong>Testing:</strong>
  Ensuring the tooltip text says what it is supposed to say.</p>
  
  <p><strong>Using:</strong>
  FF v26, ChromeDriver_win32_2.2 and Chrome v31.*, Selenium-java-2.39.0, JQueryUI, and JQuery.tipped.3.2.0.</p>
  
  <p><strong>Problem</strong> (both browsers)<strong>:</strong>
  NoSuchElementException: Unable to locate element:{"method":"id":"selector":"FileNumberRequiredText"}</p>
  
  <p><strong>Javascript</strong>:</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;     
              $(document).ready(function() {                                      
                  $('#new_file_description').prop('maxlength','150');
  
                  $("#new_file_number").bind("input keyup paste", toggleSaveButtonEnabled);
  
                  function toggleSaveButtonEnabled() {
                      if ($("#new_file_number").val() == null || $.trim($("#new_file_number").val()) == '') {
                          var element = Tipped.findElement($("#button-save")[0]);
                          Tipped.create("#button-save", "&lt;strong id='FileNumberRequiredText'&gt;&lt;direct:message key='file.number.required'/&gt;&lt;/strong&gt;", {
                            skin: 'custom',
                            hook: 'rightmiddle'
                          });
                      } else {
                          var element = Tipped.findElement($("#button-save")[0]);
                          Tipped.remove(element);
                      }
                  }
              }
          &lt;/script&gt;
  </code></pre>
  
  <p>This Test code I have working in a similar case just NOT within the dialog box:</p>
  
  <pre><code>    Thread.sleep(5000L);
  
      try {   
          WebElement webElement = driver.findElement(By.cssSelector("#button-save"));
          Actions hover = new Actions(driver);
          hover.moveToElement(webElement).build().perform();
  
          WebElement hiddenDiv = driver.findElement(By.id("FileNumberRequiredText"));
          String script = "return document.getElementById('FileNumberRequiredText').innerHTML";
          String toolTipText = (String) ((JavascriptExecutor) driver).executeScript(script, hiddenDiv);
          System.out.println("Tool tip text is: " +toolTipText+"\n");
          assertTrue(toolTipText.matches("^[\\s\\S]*File Number is required and cannot be blank\\.[\\s\\S]*$"));
      } catch (Error e) {
          verificationErrors.append("Text does not match\n"+e.toString());
      }
  </code></pre>
  
  <p>Using FireBug I can see the element is there with its ID.</p>
  
  <pre><code>    &lt;div class="t_ContentContainer t_clearfix t_Content_custom"&gt;
          &lt;strong id="FileNumberRequiredText"&gt;File Number is required and cannot be blank.&lt;/strong&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I also have tried pausing after the hover and using a clickAndHold to no avail. Thoughts?</p>
  
  <p>UPDATE: I have since tried the following with no luck:</p>
  
  <pre><code>WebElement hiddenDiv = (new WebDriverWait(driver, 5)).until(ExpectedConditions.presenceOfElementLocated(By.cssSelector("#FileNumberRequiredText")));
  </code></pre>
  
  <p>AND</p>
  
  <pre><code>WebElement hiddenDiv = (new WebDriverWait(driver, 5)).until(ExpectedConditions.presenceOfElementLocated(By.id("FileNumberRequiredText")));
  </code></pre>