How to get the text within a span in a tooltip via jQuery?

1.2k Views Asked by At

I am trying to get the text within a span to be the 'content' of a tooltip using the Tooltipster jQuery plugin.

A description of the available parameters for the 'content' option can be seen here:

http://calebjacob.com/tooltipster/#options

JQuery

<script type="text/javascript">
$(document).ready(function() {
$('.tooltip').tooltipster({
content: $(this).parent().text() // trying to get the span text here
});
});
</script>

HTML

<p>Here is some text, and here is <span class="tooltip" data-rlink="<a href=&quot;http://www.google.com&quot;>a link</a>">SOME MORE</span> text.</p>
<p>And the content should be <span class="tooltip">UNIQUE</span> to the instance.</p>

jsFiddle

http://jsfiddle.net/rwone/y9uGh/1/

Solution

Based on the answer below, this was the implementation I went with. The snippet below shows integration of the js solution with the plugins parameters:

<script type="text/javascript">
$(document).ready(function() {
$('.tooltip').tooltipster({
functionBefore: function(origin, continueTooltip){
origin.tooltipster('update', $(origin).text());
continueTooltip();
},
animation: 'grow',
arrow: false,
});
});
</script>
1

There are 1 best solutions below

3
On BEST ANSWER

Try

$(document).ready(function() {
    $('.tooltip').tooltipster({
        functionBefore: function(origin, continueTooltip){
            origin.tooltipster('update', $(origin).text());
            continueTooltip();
        }
    });
});

Demo: Fiddle