'Insert image into the title HTML attribute

I use poshy jQuery bubble and I need to insert an image inside the bubble.

With this plugin, the text inside the bubble was generated with the title attribute (I have different text, its not the same image for each link, it's why I need that).

<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'])?>">

Is it possible to insert a string inside the title attribute, if yes, how?

jqueryjquery-pluginshtml


Solution 1:[1]

Please don't misuse the title attribute, it is a very important one also in terms of accessibility (and even SEO). It should only contain simple text.

You could use the data- attributes to store the image source and retrieve it through jQuery. This is the best way you could achieve this.

Using this HTML:

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

you can easily retrieve the attribute through 

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

or from jQuery 1.4.3, you can simply use 

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

because jQuery automatically fetches data- attributes into the data object.

I don't know this exact plugin, but if you check the documentation, you certainly have a way to control where does the plugin get its data from and how it is displayed.

Solution 2:[2]

I checked Poshy Tip documentation: http://vadikom.com/demos/poshytip/

There is a way to set the content by a function, so the following may very well work:

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

You should set the data-tooltipimage only when you want image tooltip.

EDIT: an other approach, with a hidden element, where you can put anything:

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

EDIT 2: and another:

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

Solution 3:[3]

I would go with this HTML:

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

Combined with this CSS:

a.tipped img {
    display: none;
}

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

You won't need JS, but of course you can use it to animate the tooltip. In this case you can drop the a.tipped:hover img rule.

This way you won't commit an assault against the web,

Solution 4:[4]

while you should not be storing markup in the title tag, you could use:

<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'])?>">

Solution 5:[5]

Having the > inside an attribute might break the HTML as well. If you just want to have an image inside an overlay/bubble/lightbox i suggest looking at http://fancybox.net/

Solution 6:[6]

Which plugin are you using ?

Try to html encode <img src='/static/images/school/parents/btn_nav/btn_change.png'>. In PHP it's htmlentities() I think.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 vbence
Solution 4 wesbos
Solution 5 agmcleod
Solution 6 kapa

Related Questions