Appending or adding new text next to current tooltip text JQuery

Question

I was wondering whether its possible to add new text next to or append text to existing text already on tooltip.

For example, I have a div tag containing tooltip text like so;

<div id="myDiv1" class="myDiv" title="This is Tooltip">body text </div>

As shown above, the current tooltip text is: This is Tooltip

What I want to do is using jquery, appned / add more text to this. For example,

This is toopltip for myDiv1

I have tried, but these don't seem to work and most don't return anything some return undefined, please help;

$('#myDiv1').attr("title",  $('#myDiv1').tooltip + "" + "\nSome new text to append");
$('#myDiv1').prop("tooltipText",  $('#myDiv1').tooltipText + "" + "\nSome new text to append");
$('#myDiv1').attr("data-original-title",  $('#myDiv1').tooltipText + "" + "\nSome new text to append");

Any help is welcomed :)

score 2 · Answer 1 · answered Mar 08 '16 at 15:24

2

Try to use the callBack function of .attr() to accomplish your task,

$('#myDiv1').attr("title", function(_ , currentAttr){
  return currentAttr + "your text";
});

answered Mar 08 '16 at 15:24

Rajaprabhu Aravindasamy

66,513
17
101
130

1

This seemed to do the trick, however, I am going to wait for a bit longer and see what other ways are available :) in the mean +1 and thanks. – Henry Mar 08 '16 at 15:28
1

@Henry Glad to help! :) – Rajaprabhu Aravindasamy Mar 08 '16 at 15:31

score 1 · Accepted Answer · answered Mar 08 '16 at 15:34

I'd do like this:

$('#test').attr('title', $('#test').attr('title') + '\nworld');

See jsfiddle.

I'd add that if you use a function it gives you the current element as context which can be really useful:

$('#test').attr('title', function() {
  console.log($(this).attr('title'));
});

Shuma · Answer 3 · 2016-03-08T15:39:31.273

0

var currentVal = $('#myDiv1').attr('title');
$('#myDiv1').attr('title', currentVal + ' potatoe');

fiddle:https://jsfiddle.net/jdz5yz6k/

edited Mar 08 '16 at 15:39

answered Mar 08 '16 at 15:32

Shuma

283
3
5
16

score 0 · Answer 4 · answered Mar 08 '16 at 16:47

It's so simple,At first we need to get current title of this div. After that We have to append some text with this title.

Here is Jsfiddle Example

<div id="myDiv1" class="myDiv" title="This is Tooltip">body text </div>

Then the Jquery Code is:

$(document).ready(function(){
$(".myDiv").hover(function(e){
    $(this).attr('title',$(this).attr('title')+"This is new text that will be added");
 });
 })

Appending or adding new text next to current tooltip text JQuery

4 Answers4