jQuery UI Tooltip on Divs

by Bianca Kuehweidner

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<span class="toolTipHTML" data-ttcontent="ttip_daw" title="test1">Help 1</span>
<span class="toolTipHTML" data-ttcontent="ttip_zz" title="test2">Help 2</span>

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

<div class="ttip_zz_content">
Text for Help 2 goes here!
</div>

CSS

.ui-helper-hidden {
   display: none;
}

.ui-helper-hidden-accessible {
   border: 1;
   clip: rect(0 0 0 0);
   height: 1px;
   margin: -1px;
   overflow: hidden

JavaScript

$('.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();
    }
});