docs: function (str, x, y) {
              var wrapper = this.createElement('span'),
                element = wrapper.element,
                renderer = wrapper.renderer;
  
              // Text setter
              wrapper.textSetter = function (value) {
                  if (value !== element.innerHTML) {
                      delete this.bBox;
                  }
                  element.innerHTML = this.textStr = value;
              };
  
              // Various setters which rely on update transform
              wrapper.xSetter = wrapper.ySetter = wrapper.alignSetter = wrapper.rotationSetter = function (value, key) {
                  if (key === 'align') {
                      key = 'textAlign'; // Do not overwrite the SVGElement.align method. Same as VML.
                  }
                  wrapper[key] = value;
                  wrapper.htmlUpdateTransform();
              };
  
              // Set the default attributes
              wrapper.attr({
                    text: str,
                    x: mathRound(x),
                    y: mathRound(y)
                })
                .css({
                    position: ABSOLUTE,
                    whiteSpace: 'nowrap',
                    fontFamily: this.style.fontFamily,
                    fontSize: this.style.fontSize
                });
  
              // Use the HTML specific .css method
              wrapper.css = wrapper.htmlCss;
  
              // This is specific for HTML within SVG
              if (renderer.isSVG) {
                  wrapper.add = function (svgGroupWrapper) {
  
                      var htmlGroup,
                        container = renderer.box.parentNode,
                        parentGroup,
                        parents = [];
  
                      this.parentGroup = svgGroupWrapper;
  
                      // Create a mock group to hold the HTML elements
                      if (svgGroupWrapper) {
                          htmlGroup = svgGroupWrapper.div;
                          if (!htmlGroup) {
  
                              // Read the parent chain into an array and read from top down
                              parentGroup = svgGroupWrapper;
                              while (parentGroup) {
  
                                  parents.push(parentGroup);
  
                                  // Move up to the next parent group
                                  parentGroup = parentGroup.parentGroup;
                              }
  
                              // Ensure dynamically updating position when any parent is translated
                              each(parents.reverse(), function (parentGroup) {
                                  var htmlGroupStyle;
  
                                  // Create a HTML div and append it to the parent div to emulate
                                  // the SVG group structure
                                  htmlGroup = parentGroup.div = parentGroup.div || createElement(DIV, {
                                        className: attr(parentGroup.element, 'class')
                                    }, {
                                        position: ABSOLUTE,
                                        left: (parentGroup.translateX || 0) + PX,
                                        top: (parentGroup.translateY || 0) + PX
                                    }, htmlGroup || container); // the top group is appended to container
  
                                  // Shortcut
                                  htmlGroupStyle = htmlGroup.style;
  
                                  // Set listeners to update the HTML div's position whenever the SVG group
                                  // position is changed
                                  extend(parentGroup, {
                                      translateXSetter: function (value, key) {
                                          htmlGroupStyle.left = value + PX;
                                          parentGroup[key] = value;
                                          parentGroup.doTransform = true;
                                      },
                                      translateYSetter: function (value, key) {
                                          htmlGroupStyle.top = value + PX;
                                          parentGroup[key] = value;
                                          parentGroup.doTransform = true;
                                      },
                                      visibilitySetter: function (value, key) {
                                          htmlGroupStyle[key] = value;
                                      }
                                  });
                              });
  
                          }
                      } else {
                          htmlGroup = container;
                      }
  
                      htmlGroup.appendChild(element);
  
                      // Shared with VML:
                      wrapper.added = true;
                      if (wrapper.alignOnAdd) {
                          wrapper.htmlUpdateTransform();
                      }
  
                      return wrapper;
                  };
              }
              return wrapper;
          }