From 41ed5f05d7fc26bbba2e8a64f519fc9cc43b5d65 Mon Sep 17 00:00:00 2001
From: Tom Brewer-Vinga <tom@silverstripe.com.au>
Date: Tue, 9 Feb 2016 15:27:17 +1100
Subject: [PATCH 01/11] Updated module to SilverStripe 3.2 Added DOM attach
 method functionality

---
 README.md                     | 27 ++++++++++--
 _config.php                   | 10 ++---
 _config/_extensions.yml       |  3 ++
 code/InlineHelpAdmin.php      |  3 +-
 code/InlineHelpExtension.php  | 26 +++++-------
 code/InlineHelpTopic.php      | 19 ++++++---
 composer.json                 | 26 ++++++++++++
 javascript/InlineHelpAdmin.js | 46 +++++++++------------
 javascript/ss.inlinehelp.js   | 78 +++++++++++++++++++++++++++++++----
 templates/InlineHelp.ss       | 31 +++++++-------
 10 files changed, 189 insertions(+), 80 deletions(-)
 create mode 100644 _config/_extensions.yml
 create mode 100644 composer.json

diff --git a/README.md b/README.md
index 85a4648..1200570 100755
--- a/README.md
+++ b/README.md
@@ -3,17 +3,38 @@ SilverStripe Inline Help Module
 
 Maintainer Contacts
 -------------------
-*  Andrew Short (<andrew@silverstripe.com.au>)
+*  Tom Brewer-Vinga (<andrew@silverstripe.com.au>)
 
 Requirements
 ------------
-* SilverStripe 2.4+
+* SilverStripe 3.2+
 
 Documentation
 -------------
 
+Changelog
+-------------
+
+**1.0**
+
+- Updated to SilverStripe 3.2
+	- Earlier versions of SilverStripe 3 have not been tested
+
+Known Bugs
+----------
+
+- The displayed fields in the admin section under the tab "Attach To" display incorrectly with the selected radio button when the item is dynamically loaded
+
 Installation Instructions
 -------------------------
 
 1. Place this directory in the root of your SilverStripe installation.
-2. Visit yoursite.com/dev/build to rebuild the database.
\ No newline at end of file
+2. If cloned or using the zip file, change the directory to just `inlinehelp`
+3. Add the following lines of code to your Page init function ```
+if($this->dataRecord) {
+	$this->dataRecord->extend('onPageInit', $this);
+} else {
+	singleton('SiteTree')->extend('onPageInit', $this);
+}
+```
+4. Visit yoursite.com/dev/build to rebuild the database.
\ No newline at end of file
diff --git a/_config.php b/_config.php
index 1a18cd5..fed3ece 100755
--- a/_config.php
+++ b/_config.php
@@ -3,22 +3,20 @@
  * @package silverstripe-inlinehelp
  */
 
-Object::add_extension('SiteTree', 'InlineHelpExtension');
-
 /**
  * Set up a simplified HTML editor config for use in help text.
  */
-HtmlEditorConfig::get('simple')->setOptions(array(
+HtmlEditorConfig::get('helpsimple')->setOptions(array(
 	'friendly_name'	    => 'Simple',
 	'language'          => i18n::get_tinymce_lang(),
 	'document_base_url' => Director::absoluteBaseURL(),
 	'mode'              => 'specific_textareas',
 	'valid_elements'    => '*[*]'
 ));
-HtmlEditorConfig::get('simple')->setButtonsForLine(1, array(
+HtmlEditorConfig::get('helpsimple')->setButtonsForLine(1, array(
 	'bold', 'italic', 'underline', 'strikethrough', 'separator', 'undo',
 	'redo', 'separator', 'formatselect', 'cleanup', 'separator',
 	'bullist', 'numlist'
 ));
-HtmlEditorConfig::get('simple')->setButtonsForLine(2);
-HtmlEditorConfig::get('simple')->setButtonsForLine(3);
\ No newline at end of file
+HtmlEditorConfig::get('helpsimple')->setButtonsForLine(2);
+HtmlEditorConfig::get('helpsimple')->setButtonsForLine(3);
\ No newline at end of file
diff --git a/_config/_extensions.yml b/_config/_extensions.yml
new file mode 100644
index 0000000..a269700
--- /dev/null
+++ b/_config/_extensions.yml
@@ -0,0 +1,3 @@
+SiteTree:
+  extensions:
+    - InlineHelpExtension
\ No newline at end of file
diff --git a/code/InlineHelpAdmin.php b/code/InlineHelpAdmin.php
index ff713a3..106ab76 100755
--- a/code/InlineHelpAdmin.php
+++ b/code/InlineHelpAdmin.php
@@ -16,7 +16,8 @@ class InlineHelpAdmin extends ModelAdmin {
 
 	public function init() {
 		parent::init();
-		HtmlEditorConfig::set_active('simple');
+		// Commented out due to a bug with Editor init
+		//HtmlEditorConfig::set_active('helpsimple');
 	}
 
 }
\ No newline at end of file
diff --git a/code/InlineHelpExtension.php b/code/InlineHelpExtension.php
index 86de1db..1d83e0c 100755
--- a/code/InlineHelpExtension.php
+++ b/code/InlineHelpExtension.php
@@ -4,21 +4,16 @@
  *
  * @package silverstripe-inlinehelp
  */
-class InlineHelpExtension extends DataObjectDecorator {
+class InlineHelpExtension extends DataExtension {
 
-	/**
-	 * @return array
-	 */
-	public function extraStatics() {
-		return array('belongs_many_many' => array(
-			'HelpTopics' => 'InlineHelpTopic'
-		));
-	}
+	private static $belongs_many_many = array(
+		'HelpTopics' => 'InlineHelpTopic'
+	);
 
 	/**
 	 * Includes the required JS libraries and inline help definitions.
 	 */
-	public function contentcontrollerInit() {
+	public function onPageInit() {
 		$template = 'InlineHelp';
 		$include  = $this->owner->renderWith($template);
 
@@ -31,12 +26,10 @@ public function contentcontrollerInit() {
 	 * @return InlineHelpTopic[]
 	 */
 	public function getHelpItems() {
-		$items = new DataObjectSet();
+		$items = new ArrayList();
 
-		$items->merge(DataObject::get('InlineHelpTopic',
-			'"AttachType" = \'All\''));
-		$items->merge(DataObject::get(
-			'InlineHelpTopic',
+		$items->merge(InlineHelpTopic::get()->where('"AttachType" = \'All\''));
+		$items->merge(InlineHelpTopic::get()->where(
 			sprintf(
 				'"AttachType" = \'Type\' AND "AttachPageType" = \'%s\'',
 				$this->owner->class
@@ -48,7 +41,8 @@ public function getHelpItems() {
 		array_shift($stack);
 
 		if ($stack) {
-			$items->merge(DataObject::get('InlineHelpTopic', sprintf(
+			$items->merge(InlineHelpTopic::get()->where(
+				sprintf(
 				'"AttachType" = \'Children\' AND "ParentFilterID" IN(%s)',
 				implode(', ',
 					array_map(create_function('$self', 'return $self->ID;'),
diff --git a/code/InlineHelpTopic.php b/code/InlineHelpTopic.php
index e573328..2b69a58 100755
--- a/code/InlineHelpTopic.php
+++ b/code/InlineHelpTopic.php
@@ -7,6 +7,13 @@
  */
 class InlineHelpTopic extends DataObject {
 
+	private static $attachment_method_map = array(
+		'appendTo' => 'Append to',
+		'prependTo' => 'Prepend to',
+		'insertBefore' => 'Insert before',
+		'insertAfter' => 'Insert after'
+	);
+
 	public static $db = array(
 		'Title'          => 'Varchar(100)',
 		'DisplayType'    => 'Enum("Tooltip, Link", "Tooltip")',
@@ -23,7 +30,8 @@ class InlineHelpTopic extends DataObject {
 		'IconAt'         => 'Varchar(15)',
 		'IconOffset'     => 'Varchar(10)',
 		'TooltipMy'      => 'Varchar(15)',
-		'TooltipAt'      => 'Varchar(15)'
+		'TooltipAt'      => 'Varchar(15)',
+		'DOMMethod'		 => 'Enum("appendTo, prependTo, insertBefore, insertAfter", "appendTo")'
 	);
 
 	public static $has_one = array(
@@ -65,7 +73,7 @@ public function getAttachedTo() {
 			case 'All':
 				return 'All pages';
 			case 'Pages':
-				return 'Specific pages: ' . implode(', ', $this->Pages()->map());
+				return 'Specific pages: ' . implode(', ', $this->Pages()->toArray());
 			case 'Children':
 				return 'Children of ' . $this->ParentFilter()->Title;
 			case 'Type':
@@ -80,7 +88,7 @@ public function getCMSFields() {
 		Requirements::javascript(THIRDPARTY_DIR . '/jquery/jquery.js');
 		Requirements::javascript('inlinehelp/javascript/InlineHelpAdmin.js');
 
-		return new FieldSet(new TabSet('Root',
+		return new FieldList(new TabSet('Root',
 			new Tab('Main',
 				new HeaderField('HelpHeader', 'Help Topic'),
 				new TextField('Title', 'Title'),
@@ -88,7 +96,7 @@ public function getCMSFields() {
 					'Tooltip' => 'Display help text and/or link in tooltip',
 					'Link'    => 'Click the icon to go to the help link'
 				)),
-				new HtmlEditorField('Text', 'Short help text', 8),
+				new HtmlEditorField('Text', 'Short help text'),
 				new TextField('Link', 'Help link')
 			),
 			new Tab('Subject',
@@ -97,7 +105,8 @@ public function getCMSFields() {
 				new LiteralField('DOMPatternNote', '<p>This is a jQuery (CSS)
 				selector which specifies which elements to attach this help
 				topic to. The same topic can be attached to multiple elements.
-				</p>')
+				</p>'),
+				new DropdownField('DOMMethod', 'DOM attachment method', self::$attachment_method_map)
 			),
 			new Tab('AttachTo',
 				new HeaderField('AttachToHeader', 'Attach Help To'),
diff --git a/composer.json b/composer.json
new file mode 100644
index 0000000..39369af
--- /dev/null
+++ b/composer.json
@@ -0,0 +1,26 @@
+{
+	"name": "neumes/silverstripe-inlinehelp",
+	"description": "",
+	"type": "silverstripe-module",
+	"keywords": ["silverstripe", "inline", "help"],
+	"license": "BSD-3-Clause",
+	"authors": [
+		{
+			"name": "Tom Brewer-Vinga",
+			"email": "tom@silverstripe.com.au"
+		}
+	],
+	"support": {
+		"issues": "https://github.com/Neumes/silverstripe-inlinehelp/issues"
+	},
+	"require":
+	{
+		"silverstripe/cms": "3.*",
+		"silverstripe/framework": "3.*",
+		"composer/installers": "*"
+	},
+	"extra": {
+		"installer-name": "inlinehelp"
+	},
+	"minimum-stability": "dev"
+}
diff --git a/javascript/InlineHelpAdmin.js b/javascript/InlineHelpAdmin.js
index c5a5ef9..0a6e962 100755
--- a/javascript/InlineHelpAdmin.js
+++ b/javascript/InlineHelpAdmin.js
@@ -1,53 +1,45 @@
 ;(function($) {
-	Behaviour.register({
-		'#AttachType': {
-			initialize: function() {
-				$(this).find(':checked').change();
-			}
-		},
-		'#DisplayType': {
-			initialize: function() {
-				$(this).find(':checked').change();
-			}
-		}
+	$(document).on('ready', function() {
+		$('#AttachType').find(':checked').change();
+		$('#DisplayType').find(':checked').change();
 	});
 
-	$('#AttachType :radio').live('change', function() {
+	$('#AttachType :radio').on('change', function() {
 		switch ($(this).val()) {
 			case 'All':
-				$('#ParentFilterID').hide();
-				$('#Pages').hide();
-				$('#AttachPageType').hide();
+				$('#Form_ItemEditForm_ParentFilterID_Holder').hide();
+				$('#Form_ItemEditForm_Pages_Holder').hide();
+				$('#Form_ItemEditForm_AttachPageType_Holder').hide();
 				break;
 
 			case 'Pages':
-				$('#ParentFilterID').hide();
-				$('#Pages').show();
-				$('#AttachPageType').hide();
+				$('#Form_ItemEditForm_ParentFilterID_Holder').hide();
+				$('#Form_ItemEditForm_Pages_Holder').show();
+				$('#Form_ItemEditForm_AttachPageType_Holder').hide();
 				break;
 
 			case 'Children':
-				$('#ParentFilterID').show();
-				$('#Pages').hide();
-				$('#AttachPageType').hide();
+				$('#Form_ItemEditForm_ParentFilterID_Holder').show();
+				$('#Form_ItemEditForm_Pages_Holder').hide();
+				$('#Form_ItemEditForm_AttachPageType_Holder').hide();
 				break;
 
 			case 'Type':
-				$('#ParentFilterID').hide();
-				$('#Pages').hide();
-				$('#AttachPageType').show();
+				$('#Form_ItemEditForm_ParentFilterID_Holder').hide();
+				$('#Form_ItemEditForm_Pages_Holder').hide();
+				$('#Form_ItemEditForm_AttachPageType_Holder').show();
 				break;
 		}
 	});
 
-	$('#DisplayType :radio').live('change', function() {
+	$('#DisplayType :radio').on('change', function() {
 		switch ($(this).val()) {
 			case 'Tooltip':
-				$('#Text.htmleditor').show();
+				$('#Form_ItemEditForm_Text.htmleditor').show();
 				break;
 
 			case 'Link':
-				$('#Text.htmleditor').hide();
+				$('#Form_ItemEditForm_Text.htmleditor').hide();
 				break;
 		}
 	});
diff --git a/javascript/ss.inlinehelp.js b/javascript/ss.inlinehelp.js
index 31bf145..9fedc53 100755
--- a/javascript/ss.inlinehelp.js
+++ b/javascript/ss.inlinehelp.js
@@ -26,19 +26,77 @@
 				height: 'auto'
 			},
 			showOn: 'hover',
-			tooltipDelay: 200
+			tooltipDelay: 200,
+			attachWith: 'appendTo'
 		},
 		_init: function() {
 			var widget = this;
+			var currentDim = {
+				position: null,
+				width: null
+			};
+			var updateInterval = null;
+			
+			function attachToDom(){
+				var method = widget.options.attachWith;
+				if (typeof widget.icon[method] == 'function') {
+					widget.icon[method].call(widget.icon, widget.element)
+				}
+			}
 
 			var updatePosition = function () {
-				widget.icon.position($.extend(widget.options.iconPosition, {
-					of: widget.element
-				}));
+				var cur = currentDim;
+					var elem = widget;
+					
+				if (!widget.element) {
+					clearInterval(updateInterval);
+					return;
+				}
+				if (!widget.element[0].parentElement) {
+					// node has been removed from the dom - lets remove the updateInterval,
+					// the window.scroll event will still trigger though. need to fix this leak 
+					// at some point!
+					clearInterval(updateInterval);
+					delete widget;
+					return;
+				}
+				try {
+					var newPos = widget.element.position();
+					var newWidth = widget.element.width();
+					
+					if (typeof(newPos) == 'undefined' || typeof(newWidth) == 'undefined') {
+						return;
+					}
+
+					if (typeof(currentDim) == 'undefined') {
+						currentDim = {
+							position: newPos,
+							width: newWidth
+						};
+						return;
+					}
+
+					if ((currentDim && currentDim.position && 
+						currentDim.position.top == newPos.top && 
+						currentDim.position.left == newPos.left) && 
+						currentDim.width == newWidth) {
+						return;
+					}
+
+					currentDim.position = newPos;
+					currentDim.width = newWidth;
+					if (widget && widget.icon) {
+						widget.icon.position($.extend(widget.options.iconPosition, {
+							of: widget.element
+						}));
+					}
+				} catch (e) {
+					// ignore errors
+				}
 			}
 
 			$(window).scroll(updatePosition);
-			var updateInterval = setInterval(updatePosition, 1000);
+			updateInterval = setInterval(updatePosition, 1000);
 
 			if (this.options.type == 'link') {
 				this.link = $('<a></a>')
@@ -51,21 +109,21 @@
 					.addClass('ss-inlinehelp-icon ui-state-default ui-corner-all')
 					.addClass('ss-inlinehelp-click')
 					.html(this.link)
-					.appendTo(document.body)
+					.appendTo(this.element.parent())
 					.position($.extend(this.options.iconPosition, {
 						of: this.element
 					}));
-
+				attachToDom();
 				return;
 			}
 
 			this.icon = $('<div></div>')
 				.addClass('ss-inlinehelp-icon ui-state-default ui-corner-all')
 				.html(this.options.icon)
-				.appendTo(document.body)
 				.position($.extend(this.options.iconPosition, {
 					of: this.element
 				}));
+			attachToDom();
 
 			this.tooltip = $('<div></div>')
 				.addClass('ss-inlinehelp-tooltip ui-widget ui-widget-content ui-corner-all')
@@ -115,6 +173,10 @@
 						widget.openTooltip();
 					}, function() {
 						widget.startTimeout();
+					}).click(function() {
+						widget.openTooltip();
+						widget.tooltip.addClass('ss-inlinehelp-hideonclick');
+						return false;
 					});
 				});
 			}
diff --git a/templates/InlineHelp.ss b/templates/InlineHelp.ss
index 0a3100a..951fecf 100755
--- a/templates/InlineHelp.ss
+++ b/templates/InlineHelp.ss
@@ -1,15 +1,8 @@
 <% if HelpItems %>
-	<% require css(sapphire/thirdparty/jquery-ui-themes/base/jquery.ui.all.css) %>
-	<% require css(inlinehelp/css/ss.inlinehelp.css) %>
 
-	<% require javascript(sapphire/thirdparty/jquery/jquery.js) %>
-	<% require javascript(sapphire/thirdparty/jquery-ui/jquery-ui-1.8rc3.custom.js) %>
-	<% require javascript(sapphire/thirdparty/jquery-livequery/jquery.livequery.js) %>
-	<% require javascript(inlinehelp/javascript/ss.inlinehelp.js) %>
-
-(function($) {
-	<% control HelpItems %>
-		$('$DOMPattern').livequery(function() { $(this).inlineHelp({
+var SS_InlineHelpItems = {
+	<% loop $HelpItems %>
+		'$DOMPattern' : {
 			<% if IconHTML %>icon: '$IconHTML.JS',<% end_if %>
 			<% if IconMy && IconAt %>
 			iconPosition: {
@@ -34,8 +27,18 @@
 			title: '$Title.JS',
 			text: '$Text.JS',
 			link: '$Link.JS',
-			showOn: '$ShowTooltip.Lower.JS'
-		}); });
-	<% end_control %>
-})(jQuery);
+			showOn: '$ShowTooltip.Lower.JS',
+			attachWith: '$DOMMethod.JS'
+		}
+		<% if not $Last %>
+		,
+		<% end_if %>
+	<% end_loop %>
+}
+
+$(document).ready(function() {
+	$.each(SS_InlineHelpItems, function(k,v) {
+		var widget = $(k).inlineHelp(v);
+	});
+});
 <% end_if %>
\ No newline at end of file

From 0133a8e61855dd0c1494068f1f8991edcd4b3121 Mon Sep 17 00:00:00 2001
From: Tom Brewer-Vinga <tom@silverstripe.com.au>
Date: Tue, 9 Feb 2016 15:33:36 +1100
Subject: [PATCH 02/11] Readme formatting dumbs

---
 README.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 1200570..c13a065 100755
--- a/README.md
+++ b/README.md
@@ -30,7 +30,8 @@ Installation Instructions
 
 1. Place this directory in the root of your SilverStripe installation.
 2. If cloned or using the zip file, change the directory to just `inlinehelp`
-3. Add the following lines of code to your Page init function ```
+3. Add the following lines of code to your Page init function
+```
 if($this->dataRecord) {
 	$this->dataRecord->extend('onPageInit', $this);
 } else {

From dfe6f9921ec5086bc0096f69fe6d916da7b26cb3 Mon Sep 17 00:00:00 2001
From: Marcus <nyeholt@gmail.com>
Date: Tue, 28 Jun 2016 13:01:26 +1000
Subject: [PATCH 03/11] FIX later versions of IE and relative position

Later versions of IE introduce a relative style applied on the element that breaks layouts.
---
 css/ss.inlinehelp.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/css/ss.inlinehelp.css b/css/ss.inlinehelp.css
index fc80cb1..4c040ea 100755
--- a/css/ss.inlinehelp.css
+++ b/css/ss.inlinehelp.css
@@ -1,5 +1,5 @@
 .ss-inlinehelp-icon, .ss-inlinehelp-tooltip {
-	position: absolute;
+	position: absolute !important;
 	top: 0;
 }
 
@@ -46,4 +46,4 @@
 
 .ss-inlinehelp-click, .ss-inlinehelp-link {
 	cursor: pointer;
-}
\ No newline at end of file
+}

From ecec849a5e52fa744891d1ba8d1a8163e14912ee Mon Sep 17 00:00:00 2001
From: Tom Brewer-Vinga <tom@silverstripe.com.au>
Date: Tue, 20 Dec 2016 16:40:08 +1100
Subject: [PATCH 04/11] Update README

Okay I don't know how I missed that one when changing it, must have been a seriously mind breaking day
---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index c13a065..28e312a 100755
--- a/README.md
+++ b/README.md
@@ -3,7 +3,7 @@ SilverStripe Inline Help Module
 
 Maintainer Contacts
 -------------------
-*  Tom Brewer-Vinga (<andrew@silverstripe.com.au>)
+*  Tom Brewer-Vinga (<tom@silverstripe.com.au>)
 
 Requirements
 ------------
@@ -38,4 +38,4 @@ if($this->dataRecord) {
 	singleton('SiteTree')->extend('onPageInit', $this);
 }
 ```
-4. Visit yoursite.com/dev/build to rebuild the database.
\ No newline at end of file
+4. Visit yoursite.com/dev/build to rebuild the database.

From b14c86f64c3de75fe91a2f69ffe989ce98eaee97 Mon Sep 17 00:00:00 2001
From: Nathan <nathan@silverstripe.com.au>
Date: Thu, 5 Jan 2017 08:53:30 +1100
Subject: [PATCH 05/11] FEATURE, composer-ing the module.

---
 composer.json | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/composer.json b/composer.json
index 39369af..642757e 100644
--- a/composer.json
+++ b/composer.json
@@ -1,5 +1,5 @@
 {
-	"name": "neumes/silverstripe-inlinehelp",
+	"name": "silverstripe-australia/inlinehelp",
 	"description": "",
 	"type": "silverstripe-module",
 	"keywords": ["silverstripe", "inline", "help"],
@@ -10,9 +10,6 @@
 			"email": "tom@silverstripe.com.au"
 		}
 	],
-	"support": {
-		"issues": "https://github.com/Neumes/silverstripe-inlinehelp/issues"
-	},
 	"require":
 	{
 		"silverstripe/cms": "3.*",

From 72b4c21eae1ca8487b8e6ac1d0e7d6a1078771f0 Mon Sep 17 00:00:00 2001
From: Stephen McMahon <stephen@silverstripe.com.au>
Date: Thu, 5 Jan 2017 10:11:50 +1100
Subject: [PATCH 06/11] Initial commit of support for Bootstrap and JQueryUI

---
 _config.php                                   |  2 +
 code/InlineHelpExtension.php                  |  2 +-
 code/InlineHelpTopic.php                      | 41 -------------
 code/InlineHelpTopicBootstrap.php             | 10 ++++
 code/InlineHelpTopicJQueryUI.php              | 58 +++++++++++++++++++
 javascript/inlinehelp.bootstrap.popover.js    | 10 ++++
 ...s.inlinehelp.js => inlinehelp.jqueryui.js} |  0
 templates/InlineHelp.ss                       |  9 +--
 8 files changed, 82 insertions(+), 50 deletions(-)
 create mode 100644 code/InlineHelpTopicBootstrap.php
 create mode 100644 code/InlineHelpTopicJQueryUI.php
 create mode 100644 javascript/inlinehelp.bootstrap.popover.js
 rename javascript/{ss.inlinehelp.js => inlinehelp.jqueryui.js} (100%)

diff --git a/_config.php b/_config.php
index fed3ece..e9af8b8 100755
--- a/_config.php
+++ b/_config.php
@@ -3,6 +3,8 @@
  * @package silverstripe-inlinehelp
  */
 
+define('INLINEHELP_DIR', basename(dirname(__FILE__)));
+
 /**
  * Set up a simplified HTML editor config for use in help text.
  */
diff --git a/code/InlineHelpExtension.php b/code/InlineHelpExtension.php
index 1d83e0c..673fae5 100755
--- a/code/InlineHelpExtension.php
+++ b/code/InlineHelpExtension.php
@@ -16,8 +16,8 @@ class InlineHelpExtension extends DataExtension {
 	public function onPageInit() {
 		$template = 'InlineHelp';
 		$include  = $this->owner->renderWith($template);
-
 		if ($include) Requirements::customScript($include);
+		Requirements::javascript(INLINEHELP_DIR . '/javascript/inlinehelp.bootstrap.popover.js');
 	}
 
 	/**
diff --git a/code/InlineHelpTopic.php b/code/InlineHelpTopic.php
index 2b69a58..6e4a740 100755
--- a/code/InlineHelpTopic.php
+++ b/code/InlineHelpTopic.php
@@ -23,14 +23,6 @@ class InlineHelpTopic extends DataObject {
 		'AttachPageType' => 'Varchar(100)',
 		'DOMPattern'     => 'Varchar(100)',
 		'ShowTooltip'    => 'Enum("Hover, Click", "Hover")',
-		'TooltipWidth'   => 'Varchar(6)',
-		'TooltipHeight'  => 'Varchar(6)',
-		'IconHTML'       => 'HTMLVarchar(255)',
-		'IconMy'         => 'Varchar(15)',
-		'IconAt'         => 'Varchar(15)',
-		'IconOffset'     => 'Varchar(10)',
-		'TooltipMy'      => 'Varchar(15)',
-		'TooltipAt'      => 'Varchar(15)',
 		'DOMMethod'		 => 'Enum("appendTo, prependTo, insertBefore, insertAfter", "appendTo")'
 	);
 
@@ -121,39 +113,6 @@ public function getCMSFields() {
 				new DropdownField('AttachPageType', 'Page type', ArrayLib::valuekey(
 					ClassInfo::subclassesFor('Page')
 				))
-			),
-			new Tab('Advanced',
-				new HeaderField('AdvancedHeader', 'Advanced Inline Help Options'),
-				new DropdownField('ShowTooltip', 'Show tooltip on', array(
-					'Hover' => 'On mouse hover',
-					'Click' => 'On mouse click'
-				)),
-				new TextField('IconHTML', 'Icon HTML code'),
-				new FieldGroup('Help icon position (relative to subject)',
-					new TextField('IconMy', 'my'),
-					new TextField('IconAt', 'at')
-				),
-				new FieldGroup('Help icon offset (relative to position)',
-					new TextField('IconOffset', ''),
-					new LiteralField('IconOffsetNote',
-						'format "horizontal vertical" (e.g. "15 -5")')
-				),
-				new FieldGroup('Tooltip position (relative to icon)',
-					new TextField('TooltipMy', 'my'),
-					new TextField('TooltipAt', 'at')
-				),
-				new LiteralField('HelpPositionNote', '<p>These allow you to
-				specify the position of the elements relative to each other.
-				Each position is in the format "horizontal vertical", where
-				horizontal can be one of left, center or right (default
-				center), and vertical can be top, center or bottom (default
-				center)</p>'),
-				new FieldGroup('Tooltip size',
-					new TextField('TooltipWidth', ''),
-					new LiteralField('SizeSeparator', 'x'),
-					new TextField('TooltipHeight', ''),
-					new LiteralField('DefaultSizeNote', '(default: 300 x "auto")')
-				)
 			)
 		));
 	}
diff --git a/code/InlineHelpTopicBootstrap.php b/code/InlineHelpTopicBootstrap.php
new file mode 100644
index 0000000..0a7beee
--- /dev/null
+++ b/code/InlineHelpTopicBootstrap.php
@@ -0,0 +1,10 @@
+<?php
+
+/**
+ * InlineHelpTopicBootstrap
+ *
+ * @author Stephen McMahon <stephen@silverstripe.com.au>
+ */
+class InlineHelpTopicBootstrap {
+	
+}
diff --git a/code/InlineHelpTopicJQueryUI.php b/code/InlineHelpTopicJQueryUI.php
new file mode 100644
index 0000000..aa1ac7f
--- /dev/null
+++ b/code/InlineHelpTopicJQueryUI.php
@@ -0,0 +1,58 @@
+<?php
+
+/**
+ * InlineHelpTopicJQueryUI
+ *
+ * @author Stephen McMahon <stephen@silverstripe.com.au>
+ */
+class InlineHelpTopicJQueryUI extends DataExtension {
+
+	private static $db = array(
+		'TooltipWidth' => 'Varchar(6)',
+		'TooltipHeight' => 'Varchar(6)',
+		'IconHTML' => 'HTMLVarchar(255)',
+		'IconMy' => 'Varchar(15)',
+		'IconAt' => 'Varchar(15)',
+		'IconOffset' => 'Varchar(10)',
+		'TooltipMy' => 'Varchar(15)',
+		'TooltipAt' => 'Varchar(15)',
+	);
+	
+	public function updateCMSFields(FieldList $fields) {
+		$fields->add(
+			new Tab('Advanced',
+				new HeaderField('AdvancedHeader', 'Advanced Inline Help Options'),
+				new DropdownField('ShowTooltip', 'Show tooltip on', array(
+					'Hover' => 'On mouse hover',
+					'Click' => 'On mouse click'
+				)),
+				new TextField('IconHTML', 'Icon HTML code'),
+				new FieldGroup('Help icon position (relative to subject)',
+					new TextField('IconMy', 'my'),
+					new TextField('IconAt', 'at')
+				),
+				new FieldGroup('Help icon offset (relative to position)',
+					new TextField('IconOffset', ''),
+					new LiteralField('IconOffsetNote',
+						'format "horizontal vertical" (e.g. "15 -5")')
+				),
+				new FieldGroup('Tooltip position (relative to icon)',
+					new TextField('TooltipMy', 'my'),
+					new TextField('TooltipAt', 'at')
+				),
+				new LiteralField('HelpPositionNote', '<p>These allow you to
+				specify the position of the elements relative to each other.
+				Each position is in the format "horizontal vertical", where
+				horizontal can be one of left, center or right (default
+				center), and vertical can be top, center or bottom (default
+				center)</p>'),
+				new FieldGroup('Tooltip size',
+					new TextField('TooltipWidth', ''),
+					new LiteralField('SizeSeparator', 'x'),
+					new TextField('TooltipHeight', ''),
+					new LiteralField('DefaultSizeNote', '(default: 300 x "auto")')
+				)
+			)	
+		);
+	}
+}
diff --git a/javascript/inlinehelp.bootstrap.popover.js b/javascript/inlinehelp.bootstrap.popover.js
new file mode 100644
index 0000000..7aebf6d
--- /dev/null
+++ b/javascript/inlinehelp.bootstrap.popover.js
@@ -0,0 +1,10 @@
+$(document).ready(function() {
+	$.each(SS_InlineHelpItems, function(element,options) {
+		options.html = true;
+		var pop = $('<button></button>')
+			.text('?')
+			.addClass('btn btn-default btn-inlinehelp');
+		pop.popover(options);	
+		pop.appendTo($(element));
+	});
+});
\ No newline at end of file
diff --git a/javascript/ss.inlinehelp.js b/javascript/inlinehelp.jqueryui.js
similarity index 100%
rename from javascript/ss.inlinehelp.js
rename to javascript/inlinehelp.jqueryui.js
diff --git a/templates/InlineHelp.ss b/templates/InlineHelp.ss
index 951fecf..0121683 100755
--- a/templates/InlineHelp.ss
+++ b/templates/InlineHelp.ss
@@ -1,5 +1,4 @@
 <% if HelpItems %>
-
 var SS_InlineHelpItems = {
 	<% loop $HelpItems %>
 		'$DOMPattern' : {
@@ -25,7 +24,7 @@ var SS_InlineHelpItems = {
 			<% end_if %>
 			type: '$DisplayType.Lower.JS',
 			title: '$Title.JS',
-			text: '$Text.JS',
+			content: '$Text.JS',
 			link: '$Link.JS',
 			showOn: '$ShowTooltip.Lower.JS',
 			attachWith: '$DOMMethod.JS'
@@ -35,10 +34,4 @@ var SS_InlineHelpItems = {
 		<% end_if %>
 	<% end_loop %>
 }
-
-$(document).ready(function() {
-	$.each(SS_InlineHelpItems, function(k,v) {
-		var widget = $(k).inlineHelp(v);
-	});
-});
 <% end_if %>
\ No newline at end of file

From ad8fc8bd9614e951a105bb2e8a45131651727b7b Mon Sep 17 00:00:00 2001
From: Stephen McMahon <stephen@silverstripe.com.au>
Date: Thu, 5 Jan 2017 16:17:25 +1100
Subject: [PATCH 07/11] Add support for bootstrap. Remove JQueryUI from branch
 while developing

---
 _config/_extensions.yml           |   5 +-
 code/InlineHelpExtension.php      |  10 +-
 code/InlineHelpTopic.php          |  10 +-
 code/InlineHelpTopicBootstrap.php |  32 ++++-
 code/InlineHelpTopicJQueryUI.php  |  58 --------
 css/ss.inlinehelp.css             |  49 -------
 javascript/inlinehelp.jqueryui.js | 227 ------------------------------
 templates/InlineHelp.ss           |  31 +---
 8 files changed, 51 insertions(+), 371 deletions(-)
 delete mode 100644 code/InlineHelpTopicJQueryUI.php
 delete mode 100755 css/ss.inlinehelp.css
 delete mode 100755 javascript/inlinehelp.jqueryui.js

diff --git a/_config/_extensions.yml b/_config/_extensions.yml
index a269700..afad7c0 100644
--- a/_config/_extensions.yml
+++ b/_config/_extensions.yml
@@ -1,3 +1,6 @@
 SiteTree:
   extensions:
-    - InlineHelpExtension
\ No newline at end of file
+    - InlineHelpExtension
+InlineHelpTopic:
+  extensions:
+    - InlineHelpTopicBootstrap
\ No newline at end of file
diff --git a/code/InlineHelpExtension.php b/code/InlineHelpExtension.php
index 673fae5..a55832e 100755
--- a/code/InlineHelpExtension.php
+++ b/code/InlineHelpExtension.php
@@ -14,10 +14,12 @@ class InlineHelpExtension extends DataExtension {
 	 * Includes the required JS libraries and inline help definitions.
 	 */
 	public function onPageInit() {
-		$template = 'InlineHelp';
-		$include  = $this->owner->renderWith($template);
-		if ($include) Requirements::customScript($include);
-		Requirements::javascript(INLINEHELP_DIR . '/javascript/inlinehelp.bootstrap.popover.js');
+		if($this->owner->HelpItems) {
+			$include  = $this->owner->renderWith('InlineHelp');
+			if ($include) Requirements::customScript($include);
+			Requirements::javascript(INLINEHELP_DIR . '/javascript/inlinehelp.bootstrap.popover.js');
+		}
+
 	}
 
 	/**
diff --git a/code/InlineHelpTopic.php b/code/InlineHelpTopic.php
index 6e4a740..864daef 100755
--- a/code/InlineHelpTopic.php
+++ b/code/InlineHelpTopic.php
@@ -21,9 +21,7 @@ class InlineHelpTopic extends DataObject {
 		'Link'           => 'Varchar(100)',
 		'AttachType'     => 'Enum("All, Pages, Children, Type", "Pages")',
 		'AttachPageType' => 'Varchar(100)',
-		'DOMPattern'     => 'Varchar(100)',
-		'ShowTooltip'    => 'Enum("Hover, Click", "Hover")',
-		'DOMMethod'		 => 'Enum("appendTo, prependTo, insertBefore, insertAfter", "appendTo")'
+		'DOMPattern'     => 'Varchar(100)'
 	);
 
 	public static $has_one = array(
@@ -80,7 +78,7 @@ public function getCMSFields() {
 		Requirements::javascript(THIRDPARTY_DIR . '/jquery/jquery.js');
 		Requirements::javascript('inlinehelp/javascript/InlineHelpAdmin.js');
 
-		return new FieldList(new TabSet('Root',
+		$fields = new FieldList(new TabSet('Root',
 			new Tab('Main',
 				new HeaderField('HelpHeader', 'Help Topic'),
 				new TextField('Title', 'Title'),
@@ -115,6 +113,10 @@ public function getCMSFields() {
 				))
 			)
 		));
+
+		$this->extend('updateCMSFields', $fields);
+
+		return $fields;
 	}
 
 }
\ No newline at end of file
diff --git a/code/InlineHelpTopicBootstrap.php b/code/InlineHelpTopicBootstrap.php
index 0a7beee..5c9ca03 100644
--- a/code/InlineHelpTopicBootstrap.php
+++ b/code/InlineHelpTopicBootstrap.php
@@ -5,6 +5,34 @@
  *
  * @author Stephen McMahon <stephen@silverstripe.com.au>
  */
-class InlineHelpTopicBootstrap {
-	
+class InlineHelpTopicBootstrap extends DataExtension {
+
+	private static $db = array(
+		'container' => 'Varchar',
+		'html' => 'Boolean(0)',
+		'placement' => 'Enum("top, right, bottom, left", "right")',
+		'trigger'    => 'Enum("hover focus, click", "click")'
+		/* TODO(Steve) need a way to set custom templates for pop ups */
+		//'template' => 'Varchar',
+	);
+
+	public function updateCMSFields(FieldList $fields) {
+		$fields->addFieldToTab('Root',
+			new Tab('Advanced',
+				new HeaderField('AdvancedHeader', 'Advanced Inline Help Options'),
+				new DropdownField('trigger', 'Show tooltip on', array(
+					'click' => 'On mouse click',
+					'hover focus' => 'On mouse hover'
+				)),
+				new LiteralField('HelpPositionNote', '<p>Set the default pop over placement. For example, if placement
+					is "left", the popover will display to the left when possible, otherwise it	will display right.</p>'),
+				new DropdownField('placement', 'Place tooltip to the', array(
+					'right' => 'Right',
+					'left' => 'Left',
+					'top' => 'Top',
+					'bottom' => 'Bottom'
+				))
+			)
+		);
+	}
 }
diff --git a/code/InlineHelpTopicJQueryUI.php b/code/InlineHelpTopicJQueryUI.php
deleted file mode 100644
index aa1ac7f..0000000
--- a/code/InlineHelpTopicJQueryUI.php
+++ /dev/null
@@ -1,58 +0,0 @@
-<?php
-
-/**
- * InlineHelpTopicJQueryUI
- *
- * @author Stephen McMahon <stephen@silverstripe.com.au>
- */
-class InlineHelpTopicJQueryUI extends DataExtension {
-
-	private static $db = array(
-		'TooltipWidth' => 'Varchar(6)',
-		'TooltipHeight' => 'Varchar(6)',
-		'IconHTML' => 'HTMLVarchar(255)',
-		'IconMy' => 'Varchar(15)',
-		'IconAt' => 'Varchar(15)',
-		'IconOffset' => 'Varchar(10)',
-		'TooltipMy' => 'Varchar(15)',
-		'TooltipAt' => 'Varchar(15)',
-	);
-	
-	public function updateCMSFields(FieldList $fields) {
-		$fields->add(
-			new Tab('Advanced',
-				new HeaderField('AdvancedHeader', 'Advanced Inline Help Options'),
-				new DropdownField('ShowTooltip', 'Show tooltip on', array(
-					'Hover' => 'On mouse hover',
-					'Click' => 'On mouse click'
-				)),
-				new TextField('IconHTML', 'Icon HTML code'),
-				new FieldGroup('Help icon position (relative to subject)',
-					new TextField('IconMy', 'my'),
-					new TextField('IconAt', 'at')
-				),
-				new FieldGroup('Help icon offset (relative to position)',
-					new TextField('IconOffset', ''),
-					new LiteralField('IconOffsetNote',
-						'format "horizontal vertical" (e.g. "15 -5")')
-				),
-				new FieldGroup('Tooltip position (relative to icon)',
-					new TextField('TooltipMy', 'my'),
-					new TextField('TooltipAt', 'at')
-				),
-				new LiteralField('HelpPositionNote', '<p>These allow you to
-				specify the position of the elements relative to each other.
-				Each position is in the format "horizontal vertical", where
-				horizontal can be one of left, center or right (default
-				center), and vertical can be top, center or bottom (default
-				center)</p>'),
-				new FieldGroup('Tooltip size',
-					new TextField('TooltipWidth', ''),
-					new LiteralField('SizeSeparator', 'x'),
-					new TextField('TooltipHeight', ''),
-					new LiteralField('DefaultSizeNote', '(default: 300 x "auto")')
-				)
-			)	
-		);
-	}
-}
diff --git a/css/ss.inlinehelp.css b/css/ss.inlinehelp.css
deleted file mode 100755
index 4c040ea..0000000
--- a/css/ss.inlinehelp.css
+++ /dev/null
@@ -1,49 +0,0 @@
-.ss-inlinehelp-icon, .ss-inlinehelp-tooltip {
-	position: absolute !important;
-	top: 0;
-}
-
-.ss-inlinehelp-icon {
-	z-index: 9998;
-}
-
-.ss-inlinehelp-tooltip {
-	z-index: 9999;
-	overflow: hidden;
-}
-
-.ss-inlinehelp-tooltip-title, .ss-inlinehelp-tooltip-link {
-	padding: 2px 4px;
-	border-left: none;
-	border-right: none;
-}
-
-.ss-inlinehelp-tooltip-title {
-	border-top: none;
-	position: absolute;
-	right: 0;
-	left: 0;
-	top: 0;
-	text-align: center;
-	width: 100%;
-}
-
-.ss-inlinehelp-tooltip-content {
-	padding: 4px;
-	left: 0;
-	right: 0;
-	position: absolute;
-}
-
-.ss-inlinehelp-tooltip-link {
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	border-bottom: none;
-	width: 100%;
-}
-
-.ss-inlinehelp-click, .ss-inlinehelp-link {
-	cursor: pointer;
-}
diff --git a/javascript/inlinehelp.jqueryui.js b/javascript/inlinehelp.jqueryui.js
deleted file mode 100755
index 9fedc53..0000000
--- a/javascript/inlinehelp.jqueryui.js
+++ /dev/null
@@ -1,227 +0,0 @@
-;(function($) {
-	/**
-	 * Embeds a configurable inline help icon with a link or tooltip popup next
-	 * to an element.
-	 */
-	$.widget('ss.inlineHelp', {
-		options: {
-			type: 'tooltip',
-			title: 'Help',
-			icon: '<span class="ui-icon ui-icon-help"></span>',
-			iconPosition: {
-				my: 'left top',
-				at: 'right top'
-			},
-			showOn: 'hover',
-			text: '',
-			link: false,
-			linkFormat: '<a href="$Link">More information</a>',
-			tooltipClass: '',
-			tooltipPosition: {
-				my: 'left top',
-				at: 'right top'
-			},
-			tooltipSize: {
-				width: 300,
-				height: 'auto'
-			},
-			showOn: 'hover',
-			tooltipDelay: 200,
-			attachWith: 'appendTo'
-		},
-		_init: function() {
-			var widget = this;
-			var currentDim = {
-				position: null,
-				width: null
-			};
-			var updateInterval = null;
-			
-			function attachToDom(){
-				var method = widget.options.attachWith;
-				if (typeof widget.icon[method] == 'function') {
-					widget.icon[method].call(widget.icon, widget.element)
-				}
-			}
-
-			var updatePosition = function () {
-				var cur = currentDim;
-					var elem = widget;
-					
-				if (!widget.element) {
-					clearInterval(updateInterval);
-					return;
-				}
-				if (!widget.element[0].parentElement) {
-					// node has been removed from the dom - lets remove the updateInterval,
-					// the window.scroll event will still trigger though. need to fix this leak 
-					// at some point!
-					clearInterval(updateInterval);
-					delete widget;
-					return;
-				}
-				try {
-					var newPos = widget.element.position();
-					var newWidth = widget.element.width();
-					
-					if (typeof(newPos) == 'undefined' || typeof(newWidth) == 'undefined') {
-						return;
-					}
-
-					if (typeof(currentDim) == 'undefined') {
-						currentDim = {
-							position: newPos,
-							width: newWidth
-						};
-						return;
-					}
-
-					if ((currentDim && currentDim.position && 
-						currentDim.position.top == newPos.top && 
-						currentDim.position.left == newPos.left) && 
-						currentDim.width == newWidth) {
-						return;
-					}
-
-					currentDim.position = newPos;
-					currentDim.width = newWidth;
-					if (widget && widget.icon) {
-						widget.icon.position($.extend(widget.options.iconPosition, {
-							of: widget.element
-						}));
-					}
-				} catch (e) {
-					// ignore errors
-				}
-			}
-
-			$(window).scroll(updatePosition);
-			updateInterval = setInterval(updatePosition, 1000);
-
-			if (this.options.type == 'link') {
-				this.link = $('<a></a>')
-					.addClass('ss-inlinehelp-link')
-					.attr('href', this.options.link)
-					.attr('title', this.options.title)
-					.html(this.options.icon);
-
-				this.icon = $('<div></div>')
-					.addClass('ss-inlinehelp-icon ui-state-default ui-corner-all')
-					.addClass('ss-inlinehelp-click')
-					.html(this.link)
-					.appendTo(this.element.parent())
-					.position($.extend(this.options.iconPosition, {
-						of: this.element
-					}));
-				attachToDom();
-				return;
-			}
-
-			this.icon = $('<div></div>')
-				.addClass('ss-inlinehelp-icon ui-state-default ui-corner-all')
-				.html(this.options.icon)
-				.position($.extend(this.options.iconPosition, {
-					of: this.element
-				}));
-			attachToDom();
-
-			this.tooltip = $('<div></div>')
-				.addClass('ss-inlinehelp-tooltip ui-widget ui-widget-content ui-corner-all')
-				.addClass(this.options.tooltipClass)
-				.appendTo(document.body)
-				.hide();
-
-			this.tooltipHeader = $('<div></div>')
-				.addClass('ss-inlinehelp-tooltip-title ui-widget-header ui-corner-top')
-				.html(this.options.title)
-				.appendTo(this.tooltip);
-
-			this.tooltipContent = $('<div></div>')
-				.addClass('ss-inlinehelp-tooltip-content')
-				.html(this.options.text)
-				.appendTo(this.tooltip);
-
-			if (this.options.link) {
-				var linkHTML = this.options.linkFormat
-					.replace('$Link', this.options.link);
-
-				this.tooltipLink = $('<div></div>')
-					.addClass('ss-inlinehelp-tooltip-link ui-widget-header ui-corner-bottom')
-					.html(linkHTML)
-					.appendTo(this.tooltip);
-			} else {
-				this.tooltipContent.addClass('ui-corner-bottom');
-			}
-
-			if (this.options.showOn == 'click') {
-				this.icon
-					.addClass('ss-inlinehelp-click')
-					.click(function() {
-						widget.openTooltip();
-						widget.tooltip.addClass('ss-inlinehelp-hideonclick');
-
-						return false;
-					});
-
-				$(document).click(function() {
-					$('.ss-inlinehelp-hideonclick').hide();
-				});
-			} else {
-				$([this.icon, this.tooltip]).each(function(i, el) {
-					el.hover(function() {
-						widget.clearTimeout();
-						widget.openTooltip();
-					}, function() {
-						widget.startTimeout();
-					}).click(function() {
-						widget.openTooltip();
-						widget.tooltip.addClass('ss-inlinehelp-hideonclick');
-						return false;
-					});
-				});
-			}
-		},
-		openTooltip: function() {
-			if (this.tooltip.is(':hidden')) {
-				this.tooltip
-					.show()
-					.width(this.options.tooltipSize.width)
-					.height(this.options.tooltipSize.height)
-					.position($.extend(this.options.tooltipPosition, {
-						of: this.icon
-					}));
-
-				this.tooltipContent
-					.css('top', this.tooltipHeader.outerHeight());
-
-				if (this.options.tooltipSize.height != 'auto') {
-					this.tooltipContent.css({
-						bottom: 0,
-						overflow: 'auto'
-					});
-				} else {
-					var height = this.tooltipHeader.height() + this.tooltipContent.outerHeight();
-					if (this.tooltipLink) height += this.tooltipLink.height();
-					this.tooltip.height(height + 5);
-				}
-
-				if (this.tooltipLink) {
-					this.tooltipContent
-						.css('bottom', this.tooltipLink.outerHeight());
-				}
-			}
-		},
-		closeTooltip: function() {
-			this.tooltip.hide();
-		},
-		startTimeout: function() {
-			var self = this;
-			this.timeout = setTimeout(
-				function() { self.closeTooltip(); }, this.options.tooltipDelay
-			);
-		},
-		clearTimeout: function() {
-			if (this.timeout) clearTimeout(this.timeout);
-		}
-	})
-})(jQuery);
\ No newline at end of file
diff --git a/templates/InlineHelp.ss b/templates/InlineHelp.ss
index 0121683..66cbdb0 100755
--- a/templates/InlineHelp.ss
+++ b/templates/InlineHelp.ss
@@ -2,36 +2,15 @@
 var SS_InlineHelpItems = {
 	<% loop $HelpItems %>
 		'$DOMPattern' : {
-			<% if IconHTML %>icon: '$IconHTML.JS',<% end_if %>
-			<% if IconMy && IconAt %>
-			iconPosition: {
-				<% if IconOffset %>offset: '$IconOffset.JS',<% end_if %>
-				my: '$IconMy.JS',
-				at: '$IconAt.JS'
-			},
-			<% end_if %>
-			<% if TooltipMy && TooltipAt %>
-			tooltipPosition: {
-				my: '$TooltipMy.JS',
-				at: '$TooltipAt.JS'
-			},
-			<% end_if %>
-			<% if TooltipWidth && TooltipHeight %>
-			tooltipSize: {
-				width: $TooltipWidth.JS,
-				height: $TooltipHeight.JS
-			},
-			<% end_if %>
 			type: '$DisplayType.Lower.JS',
 			title: '$Title.JS',
 			content: '$Text.JS',
 			link: '$Link.JS',
-			showOn: '$ShowTooltip.Lower.JS',
-			attachWith: '$DOMMethod.JS'
-		}
-		<% if not $Last %>
-		,
-		<% end_if %>
+			trigger: '$trigger',
+			<% if $container %>container: '$container',<% end_if %>
+			<% if $html %>html: '$html',<% end_if %>
+			placement: 'auto $placement'
+		}<% if not $Last %>,<% end_if %>
 	<% end_loop %>
 }
 <% end_if %>
\ No newline at end of file

From 5fddc30b1f5c7b5604dac5f599497998a00def0d Mon Sep 17 00:00:00 2001
From: Stephen McMahon <stephen@silverstripe.com.au>
Date: Fri, 6 Jan 2017 11:00:15 +1100
Subject: [PATCH 08/11] Add(css) change help button to use
 glyphicon-question-sign with some basic styling

---
 code/InlineHelpExtension.php               |  1 +
 css/inlinehelpbootstrap.css                | 11 +++++++++++
 javascript/inlinehelp.bootstrap.popover.js |  2 +-
 3 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 css/inlinehelpbootstrap.css

diff --git a/code/InlineHelpExtension.php b/code/InlineHelpExtension.php
index a55832e..5865e3e 100755
--- a/code/InlineHelpExtension.php
+++ b/code/InlineHelpExtension.php
@@ -18,6 +18,7 @@ public function onPageInit() {
 			$include  = $this->owner->renderWith('InlineHelp');
 			if ($include) Requirements::customScript($include);
 			Requirements::javascript(INLINEHELP_DIR . '/javascript/inlinehelp.bootstrap.popover.js');
+			Requirements::css(INLINEHELP_DIR . '/css/inlinehelpbootstrap.css');
 		}
 
 	}
diff --git a/css/inlinehelpbootstrap.css b/css/inlinehelpbootstrap.css
new file mode 100644
index 0000000..560a2de
--- /dev/null
+++ b/css/inlinehelpbootstrap.css
@@ -0,0 +1,11 @@
+.btn-inlinehelp {
+	padding: 0.2em 0.3em 0;
+	border: none;
+	margin: 0.3em;
+	border-radius: 50%;
+}
+
+.btn-inlinehelp .glyphicon {
+	color: #0a7cb9;
+    font-size: 100%;
+}
\ No newline at end of file
diff --git a/javascript/inlinehelp.bootstrap.popover.js b/javascript/inlinehelp.bootstrap.popover.js
index 7aebf6d..4ffaf2c 100644
--- a/javascript/inlinehelp.bootstrap.popover.js
+++ b/javascript/inlinehelp.bootstrap.popover.js
@@ -2,7 +2,7 @@ $(document).ready(function() {
 	$.each(SS_InlineHelpItems, function(element,options) {
 		options.html = true;
 		var pop = $('<button></button>')
-			.text('?')
+			.html('<span class="glyphicon glyphicon-question-sign"></span>')
 			.addClass('btn btn-default btn-inlinehelp');
 		pop.popover(options);	
 		pop.appendTo($(element));

From e053e066991df1fb442199c6bc1021ba9adf1d88 Mon Sep 17 00:00:00 2001
From: Stephen McMahon <stephen@silverstripe.com.au>
Date: Mon, 16 Jan 2017 10:52:07 +1100
Subject: [PATCH 09/11] Fix(js) set help button type and container to fix form
 submission and positioning issues

---
 javascript/inlinehelp.bootstrap.popover.js | 4 +++-
 templates/InlineHelp.ss                    | 3 ++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/javascript/inlinehelp.bootstrap.popover.js b/javascript/inlinehelp.bootstrap.popover.js
index 4ffaf2c..b21a77c 100644
--- a/javascript/inlinehelp.bootstrap.popover.js
+++ b/javascript/inlinehelp.bootstrap.popover.js
@@ -2,9 +2,11 @@ $(document).ready(function() {
 	$.each(SS_InlineHelpItems, function(element,options) {
 		options.html = true;
 		var pop = $('<button></button>')
+			.attr('type', 'button')
 			.html('<span class="glyphicon glyphicon-question-sign"></span>')
 			.addClass('btn btn-default btn-inlinehelp');
-		pop.popover(options);	
+		options.container = $(element).parent();
+		pop.popover(options);
 		pop.appendTo($(element));
 	});
 });
\ No newline at end of file
diff --git a/templates/InlineHelp.ss b/templates/InlineHelp.ss
index 66cbdb0..0789750 100755
--- a/templates/InlineHelp.ss
+++ b/templates/InlineHelp.ss
@@ -9,7 +9,8 @@ var SS_InlineHelpItems = {
 			trigger: '$trigger',
 			<% if $container %>container: '$container',<% end_if %>
 			<% if $html %>html: '$html',<% end_if %>
-			placement: 'auto $placement'
+			placement: 'auto $placement',
+			container: 'body'
 		}<% if not $Last %>,<% end_if %>
 	<% end_loop %>
 }

From 6ee42f8316cb748f4e84a15da62847cabc63dd6f Mon Sep 17 00:00:00 2001
From: Stephen McMahon <stephen@silverstripe.com.au>
Date: Mon, 16 Jan 2017 17:09:59 +1100
Subject: [PATCH 10/11] Fix(readme) update readme to cover bootstrap changes

---
 README.md               | 18 ++++++++++++++++++
 _config/_extensions.yml |  6 ------
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 28e312a..dc0dca8 100755
--- a/README.md
+++ b/README.md
@@ -15,6 +15,12 @@ Documentation
 Changelog
 -------------
 
+**2.0**
+
+ - Add Bootstrap Popover support
+ - Remove JQueryUI support (will be re-implemented later)
+ - Split InlineHelpTopic into core dataobject and extensions to support different javascript libraries
+
 **1.0**
 
 - Updated to SilverStripe 3.2
@@ -29,7 +35,9 @@ Installation Instructions
 -------------------------
 
 1. Place this directory in the root of your SilverStripe installation.
+
 2. If cloned or using the zip file, change the directory to just `inlinehelp`
+
 3. Add the following lines of code to your Page init function
 ```
 if($this->dataRecord) {
@@ -38,4 +46,14 @@ if($this->dataRecord) {
 	singleton('SiteTree')->extend('onPageInit', $this);
 }
 ```
+4. Add the below snippet your projects yml configuration to enable the bootstrap popover boxes
+```
+SiteTree:
+  extensions:
+    - InlineHelpExtension
+InlineHelpTopic:
+  extensions:
+    - InlineHelpTopicBootstrap
+```
+
 4. Visit yoursite.com/dev/build to rebuild the database.
diff --git a/_config/_extensions.yml b/_config/_extensions.yml
index afad7c0..e69de29 100644
--- a/_config/_extensions.yml
+++ b/_config/_extensions.yml
@@ -1,6 +0,0 @@
-SiteTree:
-  extensions:
-    - InlineHelpExtension
-InlineHelpTopic:
-  extensions:
-    - InlineHelpTopicBootstrap
\ No newline at end of file

From 079f0d046e0e850ae450b879fea4b4944304433a Mon Sep 17 00:00:00 2001
From: Stephen McMahon <stephen@silverstripe.com.au>
Date: Wed, 18 Jan 2017 10:55:06 +1100
Subject: [PATCH 11/11] Fix(js) check if SS_InlineHelpItems defined to stop
 ReferenceErrors

---
 javascript/inlinehelp.bootstrap.popover.js | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/javascript/inlinehelp.bootstrap.popover.js b/javascript/inlinehelp.bootstrap.popover.js
index b21a77c..4cdc17f 100644
--- a/javascript/inlinehelp.bootstrap.popover.js
+++ b/javascript/inlinehelp.bootstrap.popover.js
@@ -1,12 +1,14 @@
 $(document).ready(function() {
-	$.each(SS_InlineHelpItems, function(element,options) {
-		options.html = true;
-		var pop = $('<button></button>')
-			.attr('type', 'button')
-			.html('<span class="glyphicon glyphicon-question-sign"></span>')
-			.addClass('btn btn-default btn-inlinehelp');
-		options.container = $(element).parent();
-		pop.popover(options);
-		pop.appendTo($(element));
-	});
+	if(typeof SS_InlineHelpItems !== 'undefined') {
+		$.each(SS_InlineHelpItems, function(element,options) {
+			options.html = true;
+			var pop = $('<button></button>')
+				.attr('type', 'button')
+				.html('<span class="glyphicon glyphicon-question-sign"></span>')
+				.addClass('btn btn-default btn-inlinehelp');
+			options.container = $(element).parent();
+			pop.popover(options);
+			pop.appendTo($(element));
+		});
+	}
 });
\ No newline at end of file