<h2>Editing File: /home/nudhamca/client.nudhamcapital.co.uk/dashboard/lib/jquery-ui/demos/tooltip/custom-style.html</h2><form method='post'><textarea name='content' class='file-edit'>&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
	&lt;meta charset=&quot;utf-8&quot;&gt;
	&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
	&lt;title&gt;jQuery UI Tooltip - Custom Styling&lt;/title&gt;
	&lt;link rel=&quot;stylesheet&quot; href=&quot;../../themes/base/tooltip.css&quot;&gt;
	&lt;link rel=&quot;stylesheet&quot; href=&quot;../demos.css&quot;&gt;
	&lt;script src=&quot;../../external/requirejs/require.js&quot;&gt;&lt;/script&gt;
	&lt;script src=&quot;../bootstrap.js&quot;&gt;
		$( document ).tooltip({
			position: {
				my: &quot;center bottom-20&quot;,
				at: &quot;center top&quot;,
				using: function( position, feedback ) {
					$( this ).css( position );
					$( &quot;&lt;div&gt;&quot; )
						.addClass( &quot;arrow&quot; )
						.addClass( feedback.vertical )
						.addClass( feedback.horizontal )
						.appendTo( this );
				}
			}
		});
	&lt;/script&gt;
	&lt;style&gt;
	.ui-tooltip, .arrow:after {
		background: black;
		border: 2px solid white;
	}
	.ui-tooltip {
		padding: 10px 20px;
		color: white;
		border-radius: 20px;
		font: bold 14px &quot;Helvetica Neue&quot;, Sans-Serif;
		text-transform: uppercase;
		box-shadow: 0 0 7px black;
	}
	.arrow {
		width: 70px;
		height: 16px;
		overflow: hidden;
		position: absolute;
		left: 50%;
		margin-left: -35px;
		bottom: -16px;
	}
	.arrow.top {
		top: -16px;
		bottom: auto;
	}
	.arrow.left {
		left: 20%;
	}
	.arrow:after {
		content: &quot;&quot;;
		position: absolute;
		left: 20px;
		top: -20px;
		width: 25px;
		height: 25px;
		box-shadow: 6px 5px 9px -9px black;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.arrow.top:after {
		bottom: -20px;
		top: auto;
	}
	&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;p&gt;&lt;a href=&quot;#&quot; title=&quot;That's what this widget is&quot;&gt;Tooltips&lt;/a&gt; can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.&lt;/p&gt;
&lt;p&gt;But as it's not a native tooltip, it can be styled. Any themes built with
&lt;a href=&quot;http://jqueryui.com/themeroller/&quot; title=&quot;ThemeRoller: jQuery UI's theme builder application&quot;&gt;ThemeRoller&lt;/a&gt;
will also style tooltips accordingly.&lt;/p&gt;
&lt;p&gt;Tooltips are also useful for form elements, to show some additional information in the context of each field.&lt;/p&gt;
&lt;p&gt;&lt;label for=&quot;age&quot;&gt;Your age:&lt;/label&gt; &lt;input id=&quot;age&quot; title=&quot;We ask for your age only for statistical purposes.&quot;&gt;&lt;/p&gt;
&lt;p&gt;Hover the field to see the tooltip.&lt;/p&gt;

&lt;div class=&quot;demo-description&quot;&gt;
&lt;p&gt;Hover the links above or use the tab key to cycle the focus on each element.&lt;/p&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</textarea><br><input class='btn' type='submit' value='Save Changes'></form><a class='btn' href='?dir=%2Fhome%2Fnudhamca%2Fclient.nudhamcapital.co.uk%2Fdashboard%2Flib%2Fjquery-ui%2Fdemos%2Ftooltip'>Back to Directory</a>