Fade Background when Tooltip Shows

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<p>For Stack Overflow question: <a href="http://stackoverflow.com/q/21744857/2948042">How can I blur out the background when I open a jQuery tooltip?</a>

</p>
<p>Hover over the link in the following paragraph and a jQuery UI <a href="http://api.jqueryui.com/tooltip/">tooltip</a> is shown and everything besides the hovered link is faded out.</p>
<hr>
<p class="poem"> <span class="title">THE TYGER</span>

    <br/>William Blake
    <br/>
    <br/>
<a href="#" title="He uses this special spelling because of many reasons. For example, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nisi lectus, porta eu velit a, aliquet sodales metus. Integer id tortor vestibulum, bibendum libero sit amet, gravida neque. Phasellus faucibus quam non enim dignissim accumsan. Morbi id ultrices lorem, eu rutrum libero. Phasellus quis luctus ipsum. Duis porttitor lectus libero, ut ultrices diam tincidunt et. Sed eu iaculis diam. Ut varius, dolor lacinia convallis adipiscing, leo nisi venenatis sem, eu sollicitudin mauris mauris ac orci.">Tyger</a>! Tyger! burning bright
    <br/>In the forests of the night,
    <br/>What immortal hand or eye
    <br/>Could frame thy fearful symmetry?
    <br>
    <br/>In what distant deeps or skies
    <br/>Burnt the fire of thine eyes?
    <br/>On what wings dare he aspire?
    <br/>What the hand dare sieze the fire?
    <br/>
    <br/>And what shoulder, &amp; what art.
    <br/>Could twist the sinews of thy heart?
    <br/>And when thy heart began to beat,
    <br/>What dread hand? &amp; what dread feet?
    <br/>
    <br/>What the hammer? what the chain?
    <br/>In what furnace was thy brain?
    <br/>What the anvil? what dread grasp
    <br/>Dare its deadly terrors clasp?
    <br/>
    <br/>When the...

CSS

p.poem {
    font-family:"Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
    font-size: 75%;
    margin-left: 25%;
    margin-right: 25%;
}
.ui-tooltip {
    font: 12px"Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
}
.metadata {
    border: 1px solid black;
    padding: 5px;
}
.title {
    font-weight: bold;
}
.bgblur {
    position: fixed;
    z-index: 800;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: black;
    opacity: 0.8;
}

JavaScript

$bgblur = $("<div class='bgblur'>");
$(function () {
    $(document).tooltip();
    $("a[title]").on("mouseenter", function () {
        $(this).css({
            "display": "inline-block",
                "position": "relative",
                "z-index": "999"
        });
        $(this).before($bgblur);
    });
    $("a[title]").on("mouseleave", function () {
        $bgblur.detach();
    });
});