How would I properly insert this PHP into an <a> tag's title?

I know this code isn't correct, but I would like to inject the HTML and PHP into the title of the below tag.

<p class="related_articles" title="<a href='<?php the_field(related_articles_1_link); ?>' target="_blank"><?php echo the_field(开发者_JAVA百科related_articles_1_title); ?></a>"Related Articles</p>

I am using a jQuery tooltip plugin (http://flowplayer.org/tools/tooltip/index.html) that grabs content from the title tag and displays it as the tooltip content. I have Advanced Custom Fields setup (WordPress plugin) that allows me to publish custom field content. In effect, the content I post in these custom fields will end up in the tooltip.

My goal is to produce a tooltip when the user hovers over "Related Articles", that displays a link that is clickable. Again, the above jQuery tooltip plugin grabs the content from the title, which is why this is causing difficulty

Ok, as we understand what you are trying to do. Lets get some things clear.

<p class="related_articles" title="<a href='<?php the_field(related_articles_1_link); ?>' target="_blank"><?php echo the_field(related_articles_1_title); ?></a>"Related Articles</p>

Is SO wrong on so many levels. First of all things, its not valid in any way. Second of all, you are not ending your <a>. You are also missing one echo and target="", inside title="" was not escaped: target=\"\".

So in a nutshell to straight up answer your question, this maybe will work (maybe, because its seriously uncommon and nonstandard)

<p class="related_articles" title="<a href=\"<?php echo the_field(related_articles_1_link); ?>\" target=\"_blank\"><?php echo the_field(related_articles_1_title); ?></a>">Related Articles</p>

Also, as one of the users already mentioned. If your server server enables short open tags, then you could make the <?php echo $foo; ?> shorter: <?= $foo ?>. So in your codes case it would look like:

<p class="related_articles" title="<a href=\"<?= the_field(related_articles_1_link) ?>\" target=\"_blank\"><?= the_field(related_articles_1_title) ?></a>">Related Articles</p>

However, as probably mentioned already. This is not recommended method and may produce all sort of issues. I recommend to research for a better solution.

Use the short form if your server supports it:

<?=the_field(related_articles_1_link)?>

or else, you should echo it:

<?php echo the_field(related_articles_1_link); ?>

<p class="related_articles" title="<?php echo htmlspecialchars('<a href="'. the_field(related_articles_1_link) .'">'. the_field(related_articles_1_title) .'</a>'); ?>">Related Articles</p>

While this should work, I am not sure if your mentioned jQuery plugin is able to interpret the given html in a title attribute as HTML (you need to test it). Most likely this will be interpreted as text and all tags will be visible to the end user, but this is not what you want.

I found an example of how to implement this in a different manner: http://flowplayer.org/tools/demos/tooltip/any-html.html

Is it possible that this is what you want?

<p class="related_articles">
    Related Articles:
    <a href="<?php echo the_field(related_articles_1_link); ?>" target="_blank">
        <?php echo the_field(related_articles_1_title); ?>
    </a>
</p>

Now that you've clarified that your question was regarding the jQuery Tooltip plugin, you should do the following:

<p class="related_articles">Related Articles</p>

<a class="tooltip" href="<?php the_field(related_articles_1_link); ?>" target="_blank">
    <?php echo the_field(related_articles_1_title); ?>
</a>

Javascript:

$('.related_articles').tooltip();

The reason this works:

The tooltip plugin looks at the element right after the one which .tooltip() was applied to. If that next element has a class name of tooltip, it'll use that as the contents of the tooltip (instead of the title attribute).

Given that you are placing html content inside an HTML property it should be escaped. As mentioned by @Karolis do this:

<p class="related_articles" title="<?php echo htmlentities('<a href="'.the_field(related_articles_1_link).'" target="_blank">'.the_field(related_articles_1_title).'</a>'); ?>">Related Articles</p>

This should generate a tooltip with the link in it. If you see stuff like "& lt;a href="... & gt;" on the tooltip then the plugin is not unescaping html values. You could unescape the values but unfortunately javascript has no function. For this you can check out php.js which provides php's functions in js but that seems kinda overkill. You could instead replace the troublesome characters like this:

<?php
// Generate complete tootltip content
$tootltipContent = '<a href="'.the_field(related_articles_link_1).'">'.the_field(related_articles_link_1).'</a>';
// Search for these
$search = array('<','>','"');
// And replace them with these
$replacements = array('@#','@#','\"'); 
$tooltipContent = str_replace($search,$replacements,$tooltipContent);
?>
<p class="related_articles" title="<?php echo $tooltipContent; ?>">Related Stuff</p>

Then look for the line in the plugin where the title is extracted from the element. (tip: on the plugin source code do a search for 'title'. There should be one place where the value is being extracted) It may look something like this tooltipContent = $(someVar).attr('title'); Now run the inverse replacement in js:

tooltipContent = tooltipContent.replace('@#','<').replace('#@','>').replace('\"','"');