Question

我使用了poshy jQuery bubble，我需要在bubble中插入一个图像。

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

<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属性，在可访问性（甚至搜索引擎优化）方面，它也非常重要。它应该只包含简单的文本。

您可以使用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-属性提取到数据对象中。

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

Answer 2

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

有一种方法可以通过函数设置内容，因此以下内容可能非常有效：

<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：

<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规则。

这样你就不会对网络进行攻击，

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

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

将图像插入标题HTML属性

6 个答案: