I normally don't do much in Javascript, but have spent the last few days working on this problem. Basically I have text in a table where the text itself is a link that when clicked selects the text. I'm using Tipsy to display the message "Click To Select Text" when the link is hovered over. After the link is clicked (and the text selected) I want the original text Tipsy displays to change to a hyperlink. I can get the text to change, but the link is plain text rather than a clickable link.
Here is a sample of one line of text (the function fnSelect uses the class to select all the text in the table row).
<td class="text"><a id="fade_text1" href="javascript:fnSelect('tom1');" onClick="alternate()" original-title="Click To Select Text"><?php echo $book['text']; ?></a></td>
The function alternate() is the one I'm attempting to use to display the hyperlink by changing the original-title and is as follows.
function alternate() {
$(".tipsy").remove();
var link = "site.com/bookmark.php";
var element = document.createElement("a");
element.setAttribute("href", link);
element.innerHTML = "Bookmark Text";
document.body.appendChild(element);
$('#fade_text1').tipsy({delayIn: 90, delayOut: 3000});
$('a').click(function() {
$('#fade_text1').attr('original-title', element);
});
}
I can't tell you how many times I have changed this trying to figure out how to make the element link clickable, but no luck. Any help you could offer would be appreciated.
Well I'm persistent if nothing else. The answer was pretty simple actually:
$(document).ready(function(){
$('#1').tipsy({fade: true, opacity: 1.0, html: true, delayOut: 4000});
});
<?php
$link = "index.php";
$text = "<a href=" . $link . ">Bookmark Text</a>";
?>
<a id="1" href="#" title="This is a Test" onclick="$('#1').attr('title', '<?php echo $text; ?>');"><?php echo "Click Me"; ?></a>