JSFiddle - React, Tailwind, and code Playground

HTML

<div><a href='#' title='To improve recognition of the social, economic and ecological values of trees, forests and forest lands, including the ...'>Chapter 11, paragraph 21(a)</a></div>

CSS

body {padding: 100px}

.ui-tooltip {
    background: url("http://geodev.grid.unep.ch/gegslive/images/box.png") no-repeat 0 0 transparent;
    width: 420px;
    height: 200px;
    color: black;
    border: none;
    padding: 0;
    font-size: 80%;
	vertical-align: middle; 
}

JavaScript

$(function() {
    var tooltips = $( "[title]" ).tooltip({
        position: {
    	at: "top+40 center"
      }
    });
 });