I have a Wordpress tooltip plugin that converts any links in the tooltip text using special entities, so that my rel="noopener" becomes rel="noopener".

Is there any difference in terms of security in this? Do browsers correctly interpret the rel="noopener" tag? To clarify, I'm referring to a new page opened with target="_blank" being able to access my window object.

I should mention that <a href=" is also converted to &lt;a href=&quot; but functionality isn't lost (i.e. the link is generated normally).

Going into the plugin's innards, I noticed it generates the text using this line:

$html .= '<span class="tooltips '.$special_class.'" style="'.$style.'" title="'.htmlspecialchars(do_shortcode($content)).'">'.do_shortcode($trigger).'</span>';

Which means, HTML is generated using PHP's htmlspecialchars. According to the manual:

Certain characters have special significance in HTML, and should be represented by HTML entities if they are to preserve their meanings.

This is an example of the actual HTML output as shown on "View Source":

<p>You are basically "seeing things". That's one reason I am referring 
to it as a <span class="tooltips " style="" title="For more on this, see this 
post on the &lt;a 
rel=&quot;noopener&quot; target=&quot;_blank&quot;&gt;philosophy of 
depiction&lt;/a&gt;."><span class="tooltext">philosophy of seeing</span> 

The actual output on the browser (hovering on the tooltip) looks like this. The link works and opens in a new tab.

Screenshot of tooltip with link inside.

I also looked at these two questions, but they don't seem to be directly relevant to my question:


1 Answer 1


If you look at the HTML output, the HTML for the tooltip is inside the title attribute of the the element the tooltip is applied to. That means that quotes and tags has to be HTML-encoded. If they were not, they could not be contained within a HTML attribute.

If you look at the picture, the content of the title attribute has somehow been turned into a real part of the page, and not just a title text. That magic is probably done by some JavaScript from the Wordpress plugin. I can't say for sure what that plugin does, but I am fairly certain that if you use the inspector in the development console to take a look at the link inside the tooltip it will indeed have rel="noopener".

So I don't think there is anything to be worried about here.

  • That's the weird part, I can't see the link using 'inspect element'. Unless I'm doing something spectacularly stupid, all I see in the 'Elements' tab (using Chrome, btw) is <p>You are basically “seeing things”. That’s one reason I am referring to it as a <span class="tooltips " style="" title=""><span class="tooltext">philosophy of seeing</span></span>.</p>. The content of title is empty, and the content of the tooltip (and the link), though visible on View Source, is missing from the development console. Unless I'm looking at the wrong place?
    – user218666
    Commented Jun 25, 2020 at 11:49
  • @DigitalDracula Maybe the HTML elements for the tooltip are generated on the fly with JS when the link is hovered? Then it can be tricky to find in the development console. Note that view source show you the static code that the server sent, but the development console shows you the live document as it is being modified by JS.
    – Anders
    Commented Jun 25, 2020 at 11:52
  • It's likely. I'll try to look more into it; I'll report back if I discover any new information. Thanks.
    – user218666
    Commented Jun 25, 2020 at 12:00
  • 1
    @DigitalDracula I added a little link to the answer.
    – Anders
    Commented Jun 25, 2020 at 12:21
  • 1
    I managed to make the development console pop up while the tooltip was hovered and you were right, rel="noopener" shows up there. Great detective work, thanks!
    – user218666
    Commented Jun 26, 2020 at 4:03

You must log in to answer this question.