将图像插入标题 HTML 属性

Question

我使用豪华的 jQuery 气泡，我需要在气泡内插入图像。

使用这个插件，气泡内的文本是使用标题属性生成的（我有不同的文本，每个链接的图像都不一样，这就是我需要它的原因）。

<a class="demo-tip-yellow" title="<img src='/static/images/school/parents/btn_nav  /btn_change.png'> " href="<?=site_url('school/parents/children/'.$item['id'])?>">

是否可以在 title 属性中插入一个字符串，如果可以，如何？

Answer 1

请不要滥用title属性，它在可访问性（甚至 SEO）方面也是一个非常重要的属性。 它应该只包含简单的文本。

您可以使用data-属性来存储图像源并通过 jQuery 检索它。 这是实现这一目标的最佳方式。

使用这个 HTML：

<a data-tooltipimage="/static/images/school/parents/btn_nav/btn_change.png" 
    title="Something descriptive" 
    href="#" 
    class="demo-tip-yellow">

您可以通过以下方式轻松检索属性

$('demo-tip-yellow').attr('data-tooltipimage');

或从 jQuery 1.4.3 开始，您可以简单地使用

$('demo-tip-yellow').data('tooltipimage');

因为 jQuery 会自动将data-属性提取到数据 object 中。

我不知道这个确切的插件，但如果你查看文档，你肯定有办法控制插件从哪里获取数据以及如何显示。

Answer 2

我检查了 Poshy Tip 文档： http://vadikom.com/demos/poshytip/

有一种方法可以通过 function 设置内容，因此以下方法可能会很好地工作：

<a href="http://linkurl" id="link" data-tooltipimage="http://imageurl" title="sometitle">link...</a>
<script type="text/javascript">
$('#link').each(function() {
    var img_url = $(this).data("tooltipimage");
    var tooltip = img_url ? "<img src='"+img_url+"' alt='' />" : $(this).attr("title");
    $(this).attr("title","");
    $(this).poshytip({
        content: function(updateCallback) {
            return tooltip;
        }
    });
});
</script>

只有在需要图像工具提示时才应设置data-tooltipimage工具提示图像。

编辑：另一种方法，带有隐藏元素，您可以在其中放置任何内容：

<a href="http://linkurl" id="link" title="sometitle">
    link...
    <span class="hidden-tooltip-data" style="display: none;"><img />...</span>
</a>
<script type="text/javascript">
$('#link').each(function() {
    var tooltip = $(".hidden-tooltip-data",this).html();
    $(this).attr("title","");
    $(this).poshytip({
        content: function(updateCallback) {
            return tooltip;
        }
    });
});
</script>

编辑2：另一个：

<a id="link1" href="http://linkurl" title="sometitle">link...</a>
<span id="link1_tooltip" style="display: none;"><img /><a></a>...</span>
<script type="text/javascript">
$('#link').each(function() {
    var linkid = $(this).attr("id");
    var tooltip = $("#"+linkid+"_tooltip").html();
    $(this).attr("title","");
    $(this).poshytip({
        content: function(updateCallback) {
            return tooltip;
        }
    });
});
</script>

Answer 3

我会用这个 HTML go：

<a class="tipped" href="/path/to/something.html">
    <img src="something-tooltip.png" alt="Real text of the tooltip."/>
    Something
</a>

结合这个 CSS：

a.tipped img {
    display: none;
}

a.tipped:hover img {
    position: absolute;
    display: block;
    margin: 10px 0 0 10px;
}

您不需要 JS，但您当然可以使用它来为工具提示设置动画。 在这种情况下，您可以删除a.tipped:hover img规则。

这样您就不会攻击 web，

Answer 4

你用的是哪个插件？

尝试 html 编码<img src='/static/images/school/parents/btn_nav/btn_change.png'> 。 在 PHP 中，我认为是htmlentities() 。

Answer 5

虽然您不应该在标题标签中存储标记，但您可以使用：

<a class="demo-tip-yellow" title="<?php echo htmlentities(<img src='/static/images/school/parents/btn_nav  /btn_change.png'>);?> " href="<?=site_url('school/parents/children/'.$item['id'])?>">

Answer 6

在属性中使用 > 也可能会破坏 HTML。 如果您只想在叠加/气泡/灯箱内放置图像，我建议您查看http://fancybox.net/