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 di开发者_StackOverflowfferent 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?
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.
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>
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,
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'])?>">
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/
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.
精彩评论