diff --git a/src/components/annotations/draw.js b/src/components/annotations/draw.js
index 25619fa9ebc..1c149d89741 100644
--- a/src/components/annotations/draw.js
+++ b/src/components/annotations/draw.js
@@ -188,6 +188,18 @@ function drawOne(gd, index) {
     }
 
     function drawGraphicalElements() {
+        // if the text has *only* a link, make the whole box into a link
+        var anchor = annText.selectAll('a');
+        if(anchor.size() === 1 && anchor.text() === annText.text()) {
+            var wholeLink = annTextGroupInner.insert('a', ':first-child').attr({
+                'xlink:xlink:href': anchor.attr('xlink:href'),
+                'xlink:xlink:show': anchor.attr('xlink:show')
+            })
+            .style({cursor: 'pointer'});
+
+            wholeLink.node().appendChild(annTextBG.node());
+        }
+
 
         // make sure lines are aligned the way they will be
         // at the end, even if their position changes
diff --git a/src/lib/svg_text_utils.js b/src/lib/svg_text_utils.js
index bb76fa2d283..e63e6485ca9 100644
--- a/src/lib/svg_text_utils.js
+++ b/src/lib/svg_text_utils.js
@@ -221,19 +221,25 @@ function texToSVG(_texString, _config, _callback) {
 }
 
 var TAG_STYLES = {
-    // would like to use baseline-shift but FF doesn't support it yet
+    // would like to use baseline-shift for sub/sup but FF doesn't support it
     // so we need to use dy along with the uber hacky shift-back-to
     // baseline below
     sup: 'font-size:70%" dy="-0.6em',
     sub: 'font-size:70%" dy="0.3em',
     b: 'font-weight:bold',
     i: 'font-style:italic',
-    a: '',
+    a: 'cursor:pointer',
     span: '',
     br: '',
     em: 'font-style:italic;font-weight:bold'
 };
 
+// sub/sup: extra tspan with zero-width space to get back to the right baseline
+var TAG_CLOSE = {
+    sup: '<tspan dy="0.42em">&#x200b;</tspan>',
+    sub: '<tspan dy="-0.21em">&#x200b;</tspan>'
+};
+
 var PROTOCOLS = ['http:', 'https:', 'mailto:'];
 
 var STRIP_TAGS = new RegExp('</?(' + Object.keys(TAG_STYLES).join('|') + ')( [^>]*)?/?>', 'g');
@@ -254,6 +260,18 @@ var UNICODE_TO_ENTITY = Object.keys(stringMappings.unicodeToEntity).map(function
 
 var NEWLINES = /(\r\n?|\n)/g;
 
+var SPLIT_TAGS = /(<[^<>]*>)/;
+
+var ONE_TAG = /<(\/?)([^ >]*)(\s+(.*))?>/i;
+
+// Style and href: pull them out of either single or double quotes.
+// Because we hack in other attributes with style (sub & sup), drop any trailing
+// semicolon in user-supplied styles so we can consistently append the tag-dependent style
+var STYLEMATCH = /(^|[\s"'])style\s*=\s*("([^"]*);?"|'([^']*);?')/i;
+var HREFMATCH = /(^|[\s"'])href\s*=\s*("([^"]*)"|'([^']*)')/i;
+
+var COLORMATCH = /(^|;)\s*color:/;
+
 exports.plainText = function(_str) {
     // strip out our pseudo-html so we have a readable
     // version to put into text fields
@@ -280,84 +298,93 @@ function encodeForHTML(_str) {
 }
 
 function convertToSVG(_str) {
-    _str = convertEntities(_str);
-
-    // normalize behavior between IE and others wrt newlines and whitespace:pre
-    // this combination makes IE barf https://github.com/plotly/plotly.js/issues/746
-    // Chrome and FF display \n, \r, or \r\n as a space in this mode.
-    // I feel like at some point we turned these into <br> but currently we don't so
-    // I'm just going to cement what we do now in Chrome and FF
-    _str = _str.replace(NEWLINES, ' ');
+    _str = convertEntities(_str)
+        /*
+         * Normalize behavior between IE and others wrt newlines and whitespace:pre
+         * this combination makes IE barf https://github.com/plotly/plotly.js/issues/746
+         * Chrome and FF display \n, \r, or \r\n as a space in this mode.
+         * I feel like at some point we turned these into <br> but currently we don't so
+         * I'm just going to cement what we do now in Chrome and FF
+         */
+        .replace(NEWLINES, ' ');
 
     var result = _str
-        .split(/(<[^<>]*>)/).map(function(d) {
-            var match = d.match(/<(\/?)([^ >]*)\s*(.*)>/i),
-                tag = match && match[2].toLowerCase(),
-                style = TAG_STYLES[tag];
-
-            if(style !== undefined) {
-                var close = match[1],
-                    extra = match[3],
-                    /**
-                     * extraStyle: any random extra css (that's supported by svg)
-                     * use this like <span style="font-family:Arial"> to change font in the middle
-                     *
-                     * at one point we supported <font family="..." size="..."> but as this isn't even
-                     * valid HTML anymore and we dropped it accidentally for many months, we will not
-                     * resurrect it.
-                     */
-                    extraStyle = extra.match(/^style\s*=\s*"([^"]+)"\s*/i);
-
-                // anchor and br are the only ones that don't turn into a tspan
+        .split(SPLIT_TAGS).map(function(d) {
+            var match = d.match(ONE_TAG);
+            var tag = match && match[2].toLowerCase();
+            var tagStyle = TAG_STYLES[tag];
+
+            if(tagStyle !== undefined) {
+                var isClose = match[1];
+                if(isClose) return (tag === 'a' ? '</a>' : '</tspan>') + (TAG_CLOSE[tag] || '');
+
+                // break: later we'll turn these into newline <tspan>s
+                // but we need to know about all the other tags first
+                if(tag === 'br') return '<br>';
+
+                /**
+                 * extra includes href and any random extra css (that's supported by svg)
+                 * use this like <span style="font-family:Arial"> to change font in the middle
+                 *
+                 * at one point we supported <font family="..." size="..."> but as this isn't even
+                 * valid HTML anymore and we dropped it accidentally for many months, we will not
+                 * resurrect it.
+                 */
+                var extra = match[4];
+
+                var out;
+
+                // anchor is the only tag that doesn't turn into a tspan
                 if(tag === 'a') {
-                    if(close) return '</a>';
-                    else if(extra.substr(0, 4).toLowerCase() !== 'href') return '<a>';
-                    else {
-                        // remove quotes, leading '=', replace '&' with '&amp;'
-                        var href = extra.substr(4)
-                            .replace(/["']/g, '')
-                            .replace(/=/, '');
-
-                        // check protocol
+                    var hrefMatch = extra && extra.match(HREFMATCH);
+                    var href = hrefMatch && (hrefMatch[3] || hrefMatch[4]);
+
+                    out = '<a';
+
+                    if(href) {
+                        // check safe protocols
                         var dummyAnchor = document.createElement('a');
                         dummyAnchor.href = href;
-                        if(PROTOCOLS.indexOf(dummyAnchor.protocol) === -1) return '<a>';
-
-                        return '<a xlink:show="new" xlink:href="' + encodeForHTML(href) + '">';
+                        if(PROTOCOLS.indexOf(dummyAnchor.protocol) !== -1) {
+                            out += ' xlink:show="new" xlink:href="' + encodeForHTML(href) + '"';
+                        }
                     }
                 }
-                else if(tag === 'br') return '<br>';
-                else if(close) {
-                    // closing tag
-
-                    // sub/sup: extra tspan with zero-width space to get back to the right baseline
-                    if(tag === 'sup') return '</tspan><tspan dy="0.42em">&#x200b;</tspan>';
-                    if(tag === 'sub') return '</tspan><tspan dy="-0.21em">&#x200b;</tspan>';
-                    else return '</tspan>';
-                }
                 else {
-                    var tspanStart = '<tspan';
+                    out = '<tspan';
 
                     if(tag === 'sup' || tag === 'sub') {
                         // sub/sup: extra zero-width space, fixes problem if new line starts with sub/sup
-                        tspanStart = '&#x200b;' + tspanStart;
-                    }
-
-                    if(extraStyle) {
-                        // most of the svg css users will care about is just like html,
-                        // but font color is different. Let our users ignore this.
-                        extraStyle = extraStyle[1].replace(/(^|;)\s*color:/, '$1 fill:');
-                        style = encodeForHTML(extraStyle) + (style ? ';' + style : '');
+                        out = '&#x200b;' + out;
                     }
+                }
 
-                    return tspanStart + (style ? ' style="' + style + '"' : '') + '>';
+                // now add style, from both the tag name and any extra css
+                // Most of the svg css that users will care about is just like html,
+                // but font color is different (uses fill). Let our users ignore this.
+                var cssMatch = extra && extra.match(STYLEMATCH);
+                var css = cssMatch && (cssMatch[3] || cssMatch[4]);
+                if(css) {
+                    css = encodeForHTML(css.replace(COLORMATCH, '$1 fill:'));
+                    if(tagStyle) css += ';' + tagStyle;
                 }
+                else if(tagStyle) css = tagStyle;
+
+                if(css) return out + ' style="' + css + '">';
+
+                return out + '>';
             }
             else {
                 return exports.xml_entity_encode(d).replace(/</g, '&lt;');
             }
         });
 
+    // now deal with line breaks
+    // TODO: this next section attempts to close and reopen tags that
+    // span a line break. But
+    // a) it only closes and reopens one tag, and
+    // b) all tags are treated like equivalent tspans (even <a> which isn't a tspan even now!)
+    // we should really do this in a type-aware way *before* converting to tspans.
     var indices = [];
     for(var index = result.indexOf('<br>'); index > 0; index = result.indexOf('<br>', index + 1)) {
         indices.push(index);
diff --git a/test/jasmine/tests/annotations_test.js b/test/jasmine/tests/annotations_test.js
index edaf854741b..6a9d1c846c2 100644
--- a/test/jasmine/tests/annotations_test.js
+++ b/test/jasmine/tests/annotations_test.js
@@ -1251,4 +1251,38 @@ describe('annotation effects', function() {
         .catch(failTest)
         .then(done);
     });
+
+    it('makes the whole text box a link if the link is the whole text', function(done) {
+        makePlot([
+            {x: 20, y: 20, text: '<a href="https://plot.ly">Plot</a>', showarrow: false},
+            {x: 50, y: 50, text: '<a href="https://plot.ly">or</a> not', showarrow: false},
+            {x: 80, y: 80, text: '<a href="https://plot.ly">arrow</a>'},
+            {x: 20, y: 80, text: 'nor <a href="https://plot.ly">this</a>'}
+        ])
+        .then(function() {
+            function checkBoxLink(index, isLink) {
+                var boxLink = d3.selectAll('.annotation[data-index="' + index + '"] g>a');
+                expect(boxLink.size()).toBe(isLink ? 1 : 0);
+
+                var textLink = d3.selectAll('.annotation[data-index="' + index + '"] text a');
+                expect(textLink.size()).toBe(1);
+                checkLink(textLink);
+
+                if(isLink) checkLink(boxLink);
+            }
+
+            function checkLink(link) {
+                expect(link.style('cursor')).toBe('pointer');
+                expect(link.attr('xlink:href')).toBe('https://plot.ly');
+                expect(link.attr('xlink:show')).toBe('new');
+            }
+
+            checkBoxLink(0, true);
+            checkBoxLink(1, false);
+            checkBoxLink(2, true);
+            checkBoxLink(3, false);
+        })
+        .catch(failTest)
+        .then(done);
+    });
 });
diff --git a/test/jasmine/tests/svg_text_utils_test.js b/test/jasmine/tests/svg_text_utils_test.js
index 3468f65317c..cacb9cfef0e 100644
--- a/test/jasmine/tests/svg_text_utils_test.js
+++ b/test/jasmine/tests/svg_text_utils_test.js
@@ -6,7 +6,7 @@ var util = require('@src/lib/svg_text_utils');
 describe('svg+text utils', function() {
     'use strict';
 
-    describe('convertToTspans should', function() {
+    describe('convertToTspans', function() {
 
         function mockTextSVGElement(txt) {
             return d3.select('body')
@@ -30,7 +30,7 @@ describe('svg+text utils', function() {
             expect(tspan.attr('style')).toBe(style);
         }
 
-        function assertAnchorAttrs(node) {
+        function assertAnchorAttrs(node, style) {
             var a = node.select('a');
 
             var WHITE_LIST = ['xlink:href', 'xlink:show', 'style'],
@@ -44,6 +44,12 @@ describe('svg+text utils', function() {
             });
 
             expect(hasWrongAttr).toBe(false);
+
+            var fullStyle = style || '';
+            if(style) fullStyle += ';';
+            fullStyle += 'cursor:pointer';
+
+            expect(a.attr('style')).toBe(fullStyle);
         }
 
         function listAttributes(node) {
@@ -60,7 +66,7 @@ describe('svg+text utils', function() {
             d3.select('#text').remove();
         });
 
-        it('check for XSS attack in href', function() {
+        it('checks for XSS attack in href', function() {
             var node = mockTextSVGElement(
                 '<a href="javascript:alert(\'attack\')">XSS</a>'
             );
@@ -70,7 +76,7 @@ describe('svg+text utils', function() {
             assertAnchorLink(node, null);
         });
 
-        it('check for XSS attack in href (with plenty of white spaces)', function() {
+        it('checks for XSS attack in href (with plenty of white spaces)', function() {
             var node = mockTextSVGElement(
                 '<a href =    "     javascript:alert(\'attack\')">XSS</a>'
             );
@@ -80,7 +86,7 @@ describe('svg+text utils', function() {
             assertAnchorLink(node, null);
         });
 
-        it('whitelist relative hrefs (interpreted as http)', function() {
+        it('whitelists relative hrefs (interpreted as http)', function() {
             var node = mockTextSVGElement(
                 '<a href="/mylink">mylink</a>'
             );
@@ -90,7 +96,7 @@ describe('svg+text utils', function() {
             assertAnchorLink(node, '/mylink');
         });
 
-        it('whitelist http hrefs', function() {
+        it('whitelists http hrefs', function() {
             var node = mockTextSVGElement(
                 '<a href="http://bl.ocks.org/">bl.ocks.org</a>'
             );
@@ -100,7 +106,7 @@ describe('svg+text utils', function() {
             assertAnchorLink(node, 'http://bl.ocks.org/');
         });
 
-        it('whitelist https hrefs', function() {
+        it('whitelists https hrefs', function() {
             var node = mockTextSVGElement(
                 '<a href="https://plot.ly">plot.ly</a>'
             );
@@ -110,7 +116,7 @@ describe('svg+text utils', function() {
             assertAnchorLink(node, 'https://plot.ly');
         });
 
-        it('whitelist mailto hrefs', function() {
+        it('whitelists mailto hrefs', function() {
             var node = mockTextSVGElement(
                 '<a href="mailto:support@plot.ly">support</a>'
             );
@@ -120,7 +126,8 @@ describe('svg+text utils', function() {
             assertAnchorLink(node, 'mailto:support@plot.ly');
         });
 
-        it('wrap XSS attacks in href', function() {
+        it('drops XSS attacks in href', function() {
+            // "XSS" gets interpreted as a relative link (http)
             var textCases = [
                 '<a href="XSS\" onmouseover="alert(1)\" style="font-size:300px">Subtitle</a>',
                 '<a href="XSS" onmouseover="alert(1)" style="font-size:300px">Subtitle</a>'
@@ -130,12 +137,32 @@ describe('svg+text utils', function() {
                 var node = mockTextSVGElement(textCase);
 
                 expect(node.text()).toEqual('Subtitle');
-                assertAnchorAttrs(node);
-                assertAnchorLink(node, 'XSS onmouseover=alert(1) style=font-size:300px');
+                assertAnchorAttrs(node, 'font-size:300px');
+                assertAnchorLink(node, 'XSS');
+            });
+        });
+
+        it('accepts href and style in <a> in any order and tosses other stuff', function() {
+            var textCases = [
+                '<a href="x" style="y">z</a>',
+                '<a href=\'x\' style="y">z</a>',
+                '<A HREF="x"StYlE=\'y\'>z</a>',
+                '<a style=\'y\'href=\'x\'>z</A>',
+                '<a \t\r\n href="x" \n\r\t style="y"  \n  \t  \r>z</a>',
+                '<a magic="true" href="x" weather="cloudy" style="y" speed="42">z</a>',
+                '<a href="x" style="y">z</a href="nope" style="for real?">',
+            ];
+
+            textCases.forEach(function(textCase) {
+                var node = mockTextSVGElement(textCase);
+
+                expect(node.text()).toEqual('z');
+                assertAnchorAttrs(node, 'y');
+                assertAnchorLink(node, 'x');
             });
         });
 
-        it('should keep query parameters in href', function() {
+        it('keeps query parameters in href', function() {
             var textCases = [
                 '<a href="https://abc.com/myFeature.jsp?name=abc&pwd=def">abc.com?shared-key</a>',
                 '<a href="https://abc.com/myFeature.jsp?name=abc&amp;pwd=def">abc.com?shared-key</a>'
@@ -150,7 +177,7 @@ describe('svg+text utils', function() {
             });
         });
 
-        it('allow basic spans', function() {
+        it('allows basic spans', function() {
             var node = mockTextSVGElement(
                 '<span>text</span>'
             );
@@ -159,7 +186,7 @@ describe('svg+text utils', function() {
             assertTspanStyle(node, null);
         });
 
-        it('ignore unquoted styles in spans', function() {
+        it('ignores unquoted styles in spans', function() {
             var node = mockTextSVGElement(
                 '<span style=unquoted>text</span>'
             );
@@ -168,7 +195,7 @@ describe('svg+text utils', function() {
             assertTspanStyle(node, null);
         });
 
-        it('allow quoted styles in spans', function() {
+        it('allows quoted styles in spans', function() {
             var node = mockTextSVGElement(
                 '<span style="quoted: yeah;">text</span>'
             );
@@ -177,7 +204,7 @@ describe('svg+text utils', function() {
             assertTspanStyle(node, 'quoted: yeah;');
         });
 
-        it('ignore extra stuff after span styles', function() {
+        it('ignores extra stuff after span styles', function() {
             var node = mockTextSVGElement(
                 '<span style="quoted: yeah;"disallowed: indeed;">text</span>'
             );
@@ -195,7 +222,7 @@ describe('svg+text utils', function() {
             assertTspanStyle(node, 'quoted: yeah&\';;');
         });
 
-        it('decode some HTML entities in text', function() {
+        it('decodes some HTML entities in text', function() {
             var node = mockTextSVGElement(
                 '100&mu; &amp; &lt; 10 &gt; 0 &nbsp;' +
                 '100 &times; 20 &plusmn; 0.5 &deg;'
@@ -203,5 +230,50 @@ describe('svg+text utils', function() {
 
             expect(node.text()).toEqual('100μ & < 10 > 0  100 × 20 ± 0.5 °');
         });
+
+        it('supports superscript by itself', function() {
+            var node = mockTextSVGElement('<sup>123</sup>');
+            expect(node.html()).toBe(
+                '​<tspan style="font-size:70%" dy="-0.6em">123</tspan>' +
+                '<tspan dy="0.42em">​</tspan>');
+        });
+
+        it('supports subscript by itself', function() {
+            var node = mockTextSVGElement('<sub>123</sub>');
+            expect(node.html()).toBe(
+                '​<tspan style="font-size:70%" dy="0.3em">123</tspan>' +
+                '<tspan dy="-0.21em">​</tspan>');
+        });
+
+        it('supports superscript and subscript together with normal text', function() {
+            var node = mockTextSVGElement('SO<sub>4</sub><sup>2-</sup>');
+            expect(node.html()).toBe(
+                'SO​<tspan style="font-size:70%" dy="0.3em">4</tspan>' +
+                '<tspan dy="-0.21em">​</tspan>​' +
+                '<tspan style="font-size:70%" dy="-0.6em">2-</tspan>' +
+                '<tspan dy="0.42em">​</tspan>');
+        });
+
+        it('allows one <b> to span <br>s', function() {
+            var node = mockTextSVGElement('be <b>Bold<br>and<br><i>Strong</i></b>');
+            expect(node.html()).toBe(
+                '<tspan class="line" dy="0em">be ' +
+                    '<tspan style="font-weight:bold">Bold</tspan></tspan>' +
+                '<tspan class="line" dy="1.3em">' +
+                    '<tspan style="font-weight:bold">and</tspan></tspan>' +
+                '<tspan class="line" dy="2.6em">' +
+                    '<tspan style="font-weight:bold">' +
+                        '<tspan style="font-style:italic">Strong</tspan></tspan></tspan>');
+        });
+
+        it('allows one <sub> to span <br>s', function() {
+            var node = mockTextSVGElement('SO<sub>4<br>44</sub>');
+            expect(node.html()).toBe(
+                '<tspan class="line" dy="0em">SO​' +
+                    '<tspan style="font-size:70%" dy="0.3em">4</tspan></tspan>' +
+                '<tspan class="line" dy="1.3em">​' +
+                    '<tspan style="font-size:70%" dy="0.3em">44</tspan>' +
+                    '<tspan dy="-0.21em">​</tspan></tspan>');
+        });
     });
 });
diff --git a/test/jasmine/tests/transform_sort_test.js b/test/jasmine/tests/transform_sort_test.js
index 6125eeadde3..b6f97ab793b 100644
--- a/test/jasmine/tests/transform_sort_test.js
+++ b/test/jasmine/tests/transform_sort_test.js
@@ -283,7 +283,7 @@ describe('Test sort transform interactions:', function() {
 
         function wait() {
             return new Promise(function(resolve) {
-                setTimeout(resolve, 60);
+                setTimeout(resolve, 100);
             });
         }