Link in Wordpress shortcode adds an extra space at the end

Question

I created a shortcode for tooltips we can use on our wordpress site. The shortcode is just a link and it displays a tooltip when you hover over the link although for some reason when using the shortcode it adds an extra space at the end of the link and I can't figure out how to get rid of it. You can see the issue on the page to our site at

http://stormable.com/hero-lore-tyrande-whisperwind/ If you look at any of the links inside the content you'll see an extra space after the link.

add_shortcode('tyrande', 'tyrande');
function tyrande( $atts, $content = null ) {

// Hero Meta Data
$HeroID = 337;
$Hero = Tyrande;
$hero = tyrande;
$franchise = warcraft;


$heroSubname = get_post_meta( $HeroID, 'hero-sub-name', true);

$health_gain = get_post_meta( $HeroID, 'health-gain', true); 
$heroHealth = $health_gain*24+get_post_meta($HeroID, "health-lvl1", true);

$healthRegenGain = get_post_meta( $HeroID, 'health-regen-gain', true);
$heroHealthRegen = $healthRegenGain*24+get_post_meta($HeroID, "health-regen-lvl1", true); 

$manaGain = get_post_meta( $HeroID, 'mana-gain', true);
$heroMana = $manaGain*24+get_post_meta($HeroID, "mana-lvl1", true);

$manaRegenGain = get_post_meta( $HeroID, 'mana-regen-gain', true);
$heroManaRegen = $manaRegenGain*24+get_post_meta($HeroID, "mana-regen-lvl1", true); 

$attackSpeedGain = get_post_meta( $HeroID, 'attack-speed-gain', true);
$heroAttackSpeed = $attackSpeedGain*24+get_post_meta($HeroID, "attack-speed-lvl1", true);

$attackDamageGain = get_post_meta( $HeroID, 'attack-damage-gain', true);
$heroAttackDamage = $attackDamageGain*24+get_post_meta($HeroID, "attack-damage-lvl1", true);

extract( shortcode_atts( array( 'icon' => 'false'), $atts ) );

    if($icon == 'true'){
        $output = '<img class="hero-tt-icon" src="http://stormable.com/img/heroes/' . $hero . '/' . $hero . '-tt-icon.png" alt="' . $hero . ' Heroes of the Storm">';
    }

$output .= '
    <a class="tooltip" 
    href="http://stormable.com/heroes/' . $hero . '/">' . $Hero . '
        <span class="hero-tooltip">
            <span class="hero-tt-image"><img src="http://stormable.com/img/heroes/' . $hero . '/' . $hero . '-tt.png" alt="Heroes of the Storm ' . $Hero . '" /></span>
            <span class="hero-tt-info">
                <span class="hero-tt-name-info">
                    <span class="hero-tt-fran"><img src="http://stormable.com/img/icons/' . $franchise . '.png" alt="Heroes of the Storm ' . $franchise . ' Franchise" /></span>
                    <span class="hero-tt-name">' . $Hero . '</span>
                    <span class="hero-tt-subname">' . $heroSubname . '</span>
                </span>
                <span class="HeroStats">
                    <span class="HeroStats-title">Hero Stats at Level 25</span>
                    <span class="HeroStats-row">
                        <span class="HeroStat-left">Health</span>
                        <span class="HeroStat-right">' . $heroHealth . ' (' . $health_gain . ' / level)</span>
                    </span>
                    <span class="HeroStats-row">
                        <span class="HeroStat-left">Health Regen</span>
                        <span class="HeroStat-right">' . $heroHealthRegen . ' (' . $healthRegenGain . ' / level)</span>
                    </span>
                    <span class="HeroStats-row">
                        <span class="HeroStat-left">Mana</span>
                        <span class="HeroStat-right">' . $heroMana . ' (' . $manaGain . ' / level)</span>
                    </span>
                    <span class="HeroStats-row">
                        <span class="HeroStat-left">Mana Regen</span>
                        <span class="HeroStat-right">' . $heroManaRegen . ' (' . $manaRegenGain . ' / level)</span>
                    </span>
                    <span class="HeroStats-row">
                        <span class="HeroStat-left">Attack Speed</span>
                        <span class="HeroStat-right">' . $heroAttackSpeed . ' (' . $attackSpeedGain . ' / level)</span>
                    </span>
                    <span class="HeroStats-row">
                        <span class="HeroStat-left">Attack Damage</span>
                        <span class="HeroStat-right">' . $heroAttackDamage . ' (' . $attackDamageGain . ' / level)</span>
                    </span>
                </span>
            <span class="clear"></span>
        </span>
    </a>
';

return $output;

}

Answer 1

I will suggest you to use HEREDOC to generate HTML in PHP.

For quick solution add use preg_replace to remove unwanted space & new line from your output. Add below line just before your return $output statement.

$output =  preg_replace('/^\s+|\n|\r|\s+$/m', '', $output);