$(document).tooltip({
show: {
effect: "slideDown",
delay: 250
},
content: function() {
var element = $( this );
if ( element.is( ".the_class" ) ) {
return "The text here";
}
},
});
Generating tooltip text from .js/external file
-
20-06-2023 - |
Question
I have created a simple jQuery toolip: http://jsfiddle.net/oampz/k9THH/
My issue is that i dont want to place the text within the img
tag as i have over 20 tooltips on a page with a lot of text in each.. Is there any way i can have the tooltip access a .js file (or any other file) and capture the necessary text from that?
HTML:
<img class="tooltip" src="http://www.katherineemmons.com/wp-content/uploads/2013/06/question_mark-icon.png" title="tool tip text 1" height="20px" />
<br>
<img class="tooltip" src="http://www.katherineemmons.com/wp-content/uploads/2013/06/question_mark-icon.png" title="tool tip text 2" height="20px" />
<br>
<img class="tooltip" src="http://www.katherineemmons.com/wp-content/uploads/2013/06/question_mark-icon.png" title="tool tip text 3" height="20px" />
<br>
<img class="tooltip" src="http://www.katherineemmons.com/wp-content/uploads/2013/06/question_mark-icon.png" title="tool tip text 4" height="20px" />
<br>
<img class="tooltip" src="http://www.katherineemmons.com/wp-content/uploads/2013/06/question_mark-icon.png" title="tool tip text 5" height="20px" />
<br>
<img class="tooltip" src="http://www.katherineemmons.com/wp-content/uploads/2013/06/question_mark-icon.png" title="tool tip text 6" height="20px" />
jQuery:
$(function () {
$(".tooltip").tooltip({
show: {
effect: "slideDown",
delay: 250
}
});
});
Thanks
Solution
OTHER TIPS
<html>
<head></head>
<link rel="stylesheet" href="css/smoothness/jquery-ui-1.10.4.custom.css">
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui-1.10.4.custom.js"></script>
<body>
<img src="http://yoursite.com/img/" data-tooltip-id="1" />
<br>
<img src="http://yoursite.com/img/" data-tooltip-id="2" />
<br>
<script>
$(function(){
var tooltip_blob = '';
$(document).tooltip({
items : "[data-tooltip-id]",
content: function() {
var tooltip_id = $(this).data('tooltip-id');
jQuery.ajax({
async:false,
dataType: 'json',
type : 'get',
url : 'http://yoursite.com/ajax.php?tooltip_id='+tooltip_id,
success : function(data){
tooltip_blob = data.tooltip;
}});
return tooltip_blob;
}
});
});
</script>
</body>
</html>
ajax file:
<?php echo json_encode(array('tooltip' => $_GET['tooltip_id'])); ?>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow