jQuery UI Tooltip should show Div instead of title attribute

Question

How to use jQuery UI Tooltips to dynamically show Div containers based on a given attribute, other than title attribute ?

Fiddle Sample will show my problem :

Example Fiddle

I have different links, which can have a title attribute as well, and if there is a given attribute, Tooltip should read the value and show the contributing Div.

Sample:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="toolTipHTML" data-ttcontent="help1_content" title="test 1">Help 1</span>
<span class="toolTipHTML" data-ttcontent="help2_content" title="test 2">Help 2</span>

<div class="help1_content">
  Text for Help 1 goes here!
  <br>Lorem
  <br>Ipsum
</div>

<div class="help2_content">
  Text for Help 1 goes here!
  <br>Lorem
  <br>Ipsum
</div>

Currently it only shows the title attributes, which is the standard behavior. But I want to change the call this way, that I can see the Divs in a tooltip (the Divs only contain Text in this sample, but can be by far more complex in reality).

Thx, I saw this, but was not able to build a working solution with the given information :-/ — JonSnow
– JonSnow, Commented Dec 8, 2016 at 11:19

Zakaria Acharki · Accepted Answer · 2016-12-08 10:47:33Z

3

Updated fiddle.

You could use content option for this purpose :

$('.toolTipHTML').tooltip({
  show: { duration: 0 },
  hide: { effect: "fade", duration: 100 },
  position: { my: "left top", at: "left bottom" },
  content: function() {
    return $('.'+$( this ).attr('data_ttcontent')+'_content').html();
  }
});

Hope this help.

answered Dec 8, 2016 at 10:47

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery UI Tooltip should show Div instead of title attribute

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related