Replace Bootstrap tooltips/popovers/dropdowns

With Ember Attacher component.

This commit removes redundant BS code.

Co-Authored-By: McMatts <matt@documize.com>

domain/section/jira/jira.go

@@ -324,7 +324,7 @@ const renderTemplate = `
             <tr>
                 <td class="bordered no-width"><a href="{{ $app }}/browse/{{ $item.Key }}">{{ $item.Key }}&nbsp;</a></td>
                 <td class="bordered no-width"><img class="section-jira-icon" src='{{ $item.Fields.Type.IconURL }}' /></td>
-                <td class="bordered no-width"><span class="badge badge-warning">{{ $item.Fields.Status.Name }}</span>&nbsp;</td>
+                <td class="bordered no-width"><span class="seciton-jira-status">{{ $item.Fields.Status.Name }}</span>&nbsp;</td>
                 <td class="bordered no-width"><img class="section-jira-icon" src='{{ $item.Fields.Priority.IconURL }}' /></td>
                 <td class="bordered no-width">
                     {{range $comp := $item.Fields.Components}}

gui/app/components/customize/user-list.js

@@ -12,12 +12,11 @@
 import $ from 'jquery';
 import { inject as service } from '@ember/service';
 import { schedule, debounce } from '@ember/runloop';
-import TooltipMixin from '../../mixins/tooltip';
 import AuthProvider from '../../mixins/auth';
 import ModalMixin from '../../mixins/modal';
 import Component from '@ember/component';
 
-export default Component.extend(AuthProvider, ModalMixin, TooltipMixin, {
+export default Component.extend(AuthProvider, ModalMixin, {
 	groupSvc: service('group'),
 	editUser: null,
 	deleteUser: null,
@@ -46,13 +45,6 @@ export default Component.extend(AuthProvider, ModalMixin, TooltipMixin, {
 		});
 
 		this.set('users', users);
-
-		this.renderTooltips();
-	},
-
-	willDestroyElement() {
-		this._super(...arguments);
-		this.removeTooltips();
 	},
 
 	onKeywordChange: function () {

gui/app/components/document/add-section.js

@@ -13,12 +13,11 @@ import $ from 'jquery';
 import { empty } from '@ember/object/computed';
 import { inject as service } from '@ember/service';
 import { computed } from '@ember/object';
-import Tooltips from '../../mixins/tooltip';
 import Notifier from '../../mixins/notifier';
 import Modals from '../../mixins/modal';
 import Component from '@ember/component';
 
-export default Component.extend(Tooltips, Notifier, Modals, {
+export default Component.extend(Notifier, Modals, {
 	documentService: service('document'),
 	sectionService: service('section'),
 	store: service(),

gui/app/components/document/content-linker.js

@@ -13,11 +13,10 @@ import { debounce } from '@ember/runloop';
 import { computed, set } from '@ember/object';
 import { inject as service } from '@ember/service';
 import stringUtil from '../../utils/string';
-import TooltipMixin from '../../mixins/tooltip';
 import ModalMixin from '../../mixins/modal';
 import Component from '@ember/component';
 
-export default Component.extend(ModalMixin, TooltipMixin, {
+export default Component.extend(ModalMixin, {
 	link: service(),
 	linkName: '',
 	selection: null,
@@ -71,12 +70,10 @@ export default Component.extend(ModalMixin, TooltipMixin, {
 		this._super(...arguments);
 
 		this.$('#content-linker-networklocation').removeClass('is-invalid');
-		this.renderTooltips();
 	},
 
 	willDestroyElement() {
 		this._super(...arguments);
-		this.removeTooltips();
 		this.modalClose(this.get('modalId'));
 	},
 

gui/app/components/document/document-meta.js

@@ -9,21 +9,18 @@
 //
 // https://documize.com
 
-import $ from 'jquery';
 import { A } from '@ember/array';
 import { computed } from '@ember/object';
 import { notEmpty } from '@ember/object/computed';
 import { inject as service } from '@ember/service';
 import Modals from '../../mixins/modal';
-import Tooltips from '../../mixins/tooltip';
 import Component from '@ember/component';
 
-export default Component.extend(Modals, Tooltips, {
+export default Component.extend(Modals, {
 	documentService: service('document'),
 	sessionService: service('session'),
 	categoryService: service('category'),
 	router: service(),
-
 	contributorMsg: '',
 	approverMsg: '',
 	userChanges: notEmpty('contributorMsg'),
@@ -79,69 +76,9 @@ export default Component.extend(Modals, Tooltips, {
 		this._super(...arguments);
 
 		this.workflowStatus();
-		this.popovers();
 		this.load();
 	},
 
-	didInsertElement() {
-		this._super(...arguments);
-
-		this.popovers();
-		this.renderTooltips();
-	},
-
-	willDestroyElement() {
-		this._super(...arguments);
-
-		$('#document-lifecycle-popover').popover('dispose');
-		$('#document-protection-popover').popover('dispose');
-		this.removeTooltips();
-	},
-
-	popovers() {
-		let constants = this.get('constants');
-
-		if (this.get('permissions.documentLifecycle')) {
-			$('#document-lifecycle-popover').addClass('cursor-pointer');
-		} else {
-			$('#document-lifecycle-popover').popover('dispose');
-			$('#document-lifecycle-popover').removeClass('cursor-pointer');
-
-			$('#document-lifecycle-popover').popover({
-				html: true,
-				title: 'Lifecycle',
-				content: "<p>Draft &mdash; restricted visiblity and not searchable</p><p>Live &mdash; document visible to all</p><p>Archived &mdash; not visible or searchable</p>",
-				placement: 'top',
-				trigger: 'hover click'
-			});
-		}
-
-		if (this.get('permissions.documentApprove')) {
-			$('#document-protection-popover').addClass('cursor-pointer');
-		} else {
-			$('#document-protection-popover').popover('dispose');
-			$('#document-protection-popover').removeClass('cursor-pointer');
-
-			let ccMsg = `<p>${this.changeControlMsg}</p>`;
-
-			if (this.get('document.protection') ===  constants.ProtectionType.Review) {
-				ccMsg += '<ul>'
-				ccMsg += `<li>${this.approvalMsg}</li>`;
-				if (this.get('userChanges')) ccMsg += `<li>Your contributions: ${this.contributorMsg}</li>`;
-				if (this.get('isApprover') && this.get('approverMsg.length') > 0) ccMsg += `<li>${this.approverMsg}</li>`;
-				ccMsg += '</ul>'
-			}
-
-			$('#document-protection-popover').popover({
-				html: true,
-				title: 'Change Control',
-				content: ccMsg,
-				placement: 'top',
-				trigger: 'hover click'
-			});
-		}
-	},
-
 	workflowStatus() {
 		let pages = this.get('pages');
 		let contributorMsg = '';
@@ -175,8 +112,6 @@ export default Component.extend(Modals, Tooltips, {
 
 		this.set('approverMsg', approverMsg);
 		this.set('selectedVersion', this.get('versions').findBy('documentId', this.get('document.id')));
-
-		this.popovers();
 	},
 
 	load() {

gui/app/components/document/document-page.js

@@ -11,9 +11,8 @@
 
 import { inject as service } from '@ember/service';
 import Component from '@ember/component';
-import TooltipMixin from '../../mixins/tooltip';
 
-export default Component.extend(TooltipMixin, {
+export default Component.extend({
 	documentService: service('document'),
 	sectionService: service('section'),
 	editMode: false,

gui/app/components/document/document-toc.js

@@ -13,10 +13,9 @@ import { computed } from '@ember/object';
 import { schedule } from '@ember/runloop';
 import { inject as service } from '@ember/service';
 import tocUtil from '../../utils/toc';
-import TooltipMixin from '../../mixins/tooltip';
 import Component from '@ember/component';
 
-export default Component.extend(TooltipMixin, {
+export default Component.extend({
 	documentService: service('document'),
 	emptyState: computed('pages', function () {
 		return this.get('pages.length') === 0;
@@ -54,13 +53,11 @@ export default Component.extend(TooltipMixin, {
 	didInsertElement() {
 		this._super(...arguments);
 		this.eventBus.subscribe('documentPageAdded', this, 'onDocumentPageAdded');
-		this.renderTooltips();
 	},
 
 	willDestroyElement() {
 		this._super(...arguments);
 		this.eventBus.unsubscribe('documentPageAdded');
-		this.removeTooltips();
 	},
 
 	onDocumentPageAdded(pageId) {

gui/app/components/document/page-heading.js

@@ -13,12 +13,11 @@ import $ from 'jquery';
 import { computed } from '@ember/object';
 import { debounce } from '@ember/runloop';
 import { inject as service } from '@ember/service';
-import Tooltips from '../../mixins/tooltip';
 import ModalMixin from '../../mixins/modal';
 import tocUtil from '../../utils/toc';
 import Component from '@ember/component';
 
-export default Component.extend(ModalMixin, Tooltips, {
+export default Component.extend(ModalMixin, {
 	documentService: service('document'),
 	searchService: service('search'),
 	router: service(),
@@ -78,14 +77,6 @@ export default Component.extend(ModalMixin, Tooltips, {
 		this.setState(this.get('page.id'));
 	},
 
-	didInsertElement() {
-		this._super(...arguments);
-
-		if (this.get('session.authenticated')) {
-			this.renderTooltips();
-		}
-	},
-
 	searchDocs() {
 		let payload = { keywords: this.get('docSearchFilter').trim(), doc: true };
 		if (payload.keywords.length == 0) return;

gui/app/components/document/view-content.js

@@ -13,11 +13,10 @@ import $ from 'jquery';
 import { notEmpty } from '@ember/object/computed';
 import { inject as service } from '@ember/service';
 import { computed } from '@ember/object';
-import TooltipMixin from '../../mixins/tooltip';
 import Notifier from '../../mixins/notifier';
 import Component from '@ember/component';
 
-export default Component.extend(TooltipMixin, Notifier, {
+export default Component.extend(Notifier, {
 	documentService: service('document'),
 	sectionService: service('section'),
 	store: service(),
@@ -49,21 +48,9 @@ export default Component.extend(TooltipMixin, Notifier, {
 	didInsertElement() {
 		this._super(...arguments);
 
-		if (this.get('session.authenticated')) {
-			this.renderTooltips();
-		}
-
 		this.jumpToSection(this.get('currentPageId'));
 	},
 
-	willDestroyElement() {
-		this._super(...arguments);
-
-		if (this.get('session.authenticated')) {
-			this.removeTooltips();
-		}
-	},
-
 	contentLinkHandler() {
 		let links = this.get('link');
 		let doc = this.get('document');

gui/app/components/folder/documents-list.js

@@ -11,10 +11,9 @@
 
 import { computed } from '@ember/object';
 import { A } from '@ember/array';
-import TooltipMixin from '../../mixins/tooltip';
 import Component from '@ember/component';
 
-export default Component.extend(TooltipMixin, {
+export default Component.extend({
 	showDeleteDialog: false,
 	showMoveDialog: false,
 	selectedDocuments: A([]),
@@ -105,7 +104,6 @@ export default Component.extend(TooltipMixin, {
 
 			this.set('selectedCaption', list.length > 1 ? 'documents' : 'document');
 			this.set('selectedDocuments', A(list));
-			this.renderTooltips();
         }
     }
 });

gui/app/components/folder/settings-category.js

@@ -12,19 +12,17 @@
 import $ from 'jquery';
 import { A } from '@ember/array';
 import { inject as service } from '@ember/service';
-import TooltipMixin from '../../mixins/tooltip';
 import ModalMixin from '../../mixins/modal';
 import Notifer from '../../mixins/notifier';
 import Component from '@ember/component';
 
-export default Component.extend(ModalMixin, TooltipMixin, Notifer, {
+export default Component.extend(ModalMixin, Notifer, {
 	spaceSvc: service('folder'),
 	groupSvc: service('group'),
 	categorySvc: service('category'),
 	appMeta: service(),
 	store: service(),
 	deleteId: '',
-	dropdown: null,
 	newCategory: '',
 
 	init() {
@@ -34,13 +32,11 @@ export default Component.extend(ModalMixin, TooltipMixin, Notifer, {
 
 	didReceiveAttrs() {
 		this._super(...arguments);
-		this.renderTooltips();
 		this.load();
 	},
 
 	willDestroyElement() {
 		this._super(...arguments);
-		this.removeTooltips();
 	},
 
 	load() {
@@ -143,13 +139,11 @@ export default Component.extend(ModalMixin, TooltipMixin, Notifer, {
 
 		onEdit(id) {
 			this.setEdit(id, true);
-			this.removeTooltips();
 		},
 
 		onEditCancel(id) {
 			this.setEdit(id, false);
 			this.load();
-			this.renderTooltips();
 		},
 
 		onSave(id) {
@@ -165,8 +159,6 @@ export default Component.extend(ModalMixin, TooltipMixin, Notifer, {
 			this.get('categorySvc').save(cat).then(() => {
 				this.load();
 			});
-
-			this.renderTooltips();
 		},
 
 		onShowAccessPicker(catId) {

gui/app/components/layout/top-bar.js

@@ -13,10 +13,9 @@ import $ from 'jquery';
 import { notEmpty } from '@ember/object/computed';
 import { inject as service } from '@ember/service'
 import ModalMixin from '../../mixins/modal';
-import TooltipMixin from '../../mixins/tooltip';
 import Component from '@ember/component';
 
-export default Component.extend(ModalMixin, TooltipMixin, {
+export default Component.extend(ModalMixin, {
 	classNames: ['layout-header', 'non-printable'],
 	tagName: 'header',
 	folderService: service('folder'),
@@ -70,8 +69,6 @@ export default Component.extend(ModalMixin, TooltipMixin, {
 			this.eventBus.subscribe('pinChange', this, 'setupPins');
 			this.setupPins();
 		}
-
-		this.renderTooltips();
 	},
 
 	setupPins() {
@@ -90,7 +87,6 @@ export default Component.extend(ModalMixin, TooltipMixin, {
 	willDestroyElement() {
 		this._super(...arguments);
 
-		this.removeTooltips();
 		this.eventBus.unsubscribe('pinChange');
 	},
 

gui/app/components/section/base-editor-inline.js

@@ -12,11 +12,10 @@
 import $ from 'jquery';
 import { empty } from '@ember/object/computed';
 import { computed } from '@ember/object';
-import TooltipMixin from '../../mixins/tooltip';
 import ModalMixin from '../../mixins/modal';
 import Component from '@ember/component';
 
-export default Component.extend(TooltipMixin, ModalMixin, {
+export default Component.extend(ModalMixin, {
 	busy: false,
 	mousetrap: null,
 	showLinkModal: false,
@@ -57,15 +56,11 @@ export default Component.extend(TooltipMixin, ModalMixin, {
 		$('#' + this.get('pageId')).focus(function() {
 			$(this).select();
 		});
-
-		this.renderTooltips();
 	},
 
 	willDestroyElement() {
 		this._super(...arguments);
 
-		this.removeTooltips();
-
 		let mousetrap = this.get('mousetrap');
 		if (is.not.null(mousetrap)) {
 			mousetrap.unbind('esc');

gui/app/components/section/code/type-editor.js

@@ -10,10 +10,9 @@
 // https://documize.com
 
 import { computed } from '@ember/object';
-import TooltipMixin from '../../../mixins/tooltip';
 import Component from '@ember/component';
 
-export default Component.extend(TooltipMixin, {
+export default Component.extend({
     isDirty: false,
     pageBody: "",
     codeSyntax: null,
@@ -100,9 +99,6 @@ export default Component.extend(TooltipMixin, {
 			editor = null;
 			this.set('codeEditor', null);
 		}
-
-		this.removeTooltips();
-
     },
 
     // Wrap code in PRE tag with language identifier for subsequent rendering.

gui/app/components/section/gemini/type-editor.js

@@ -13,11 +13,10 @@ import $ from 'jquery';
 import { set } from '@ember/object';
 import { schedule } from '@ember/runloop';
 import { inject as service } from '@ember/service';
-import Component from '@ember/component';
 import SectionMixin from '../../../mixins/section';
-import TooltipMixin from '../../../mixins/tooltip';
+import Component from '@ember/component';
 
-export default Component.extend(SectionMixin, TooltipMixin, {
+export default Component.extend(SectionMixin, {
 	sectionService: service('section'),
 	isDirty: false,
 	waiting: false,
@@ -92,7 +91,6 @@ export default Component.extend(SectionMixin, TooltipMixin, {
 
 				schedule('afterRender', () => {
 					window.scrollTo(0, document.body.scrollHeight);
-					self.renderTooltips();
 				});
 				self.set('waiting', false);
 			}, function (reason) { // eslint-disable-line no-unused-vars

gui/app/components/section/jira/type-editor.js

@@ -10,11 +10,10 @@
 // https://documize.com
 
 import { inject as service } from '@ember/service';
-import Component from '@ember/component';
 import SectionMixin from '../../../mixins/section';
-import TooltipMixin from '../../../mixins/tooltip';
+import Component from '@ember/component';
 
-export default Component.extend(SectionMixin, TooltipMixin, {
+export default Component.extend(SectionMixin, {
 	sectionService: service('section'),
 	isDirty: false,
 	waiting: false,

gui/app/components/section/trello/type-editor.js

@@ -14,12 +14,11 @@ import $ from 'jquery';
 import { htmlSafe } from '@ember/string';
 import { computed, set } from '@ember/object';
 import { inject as service } from '@ember/service';
-import Component from '@ember/component';
 import NotifierMixin from '../../../mixins/notifier';
-import TooltipMixin from '../../../mixins/tooltip';
 import SectionMixin from '../../../mixins/section';
+import Component from '@ember/component';
 
-export default Component.extend(SectionMixin, NotifierMixin, TooltipMixin, {
+export default Component.extend(SectionMixin, NotifierMixin, {
 	sectionService: service('section'),
 	isDirty: false,
 	busy: false,
@@ -93,10 +92,6 @@ export default Component.extend(SectionMixin, NotifierMixin, TooltipMixin, {
 			});
 	},
 
-	willDestroyElement() {
-		this.removeTooltips();
-	},
-
 	getBoardLists() {
 		this.set('busy', true);
 

gui/app/components/spaces/space-list.js

@@ -9,12 +9,11 @@
 //
 // https://documize.com
 
-import Component from '@ember/component';
-import TooltipMixin from '../../mixins/tooltip';
 import NotifierMixin from '../../mixins/notifier';
 import AuthMixin from '../../mixins/auth';
+import Component from '@ember/component';
 
-export default Component.extend(TooltipMixin, NotifierMixin, AuthMixin, {
+export default Component.extend(NotifierMixin, AuthMixin, {
 	hasPublicFolders: false,
 	hasProtectedFolders: false,
 	hasPrivateFolders: false,

gui/app/components/toolbar/for-document.js

@@ -12,12 +12,11 @@
 import $ from 'jquery';
 import { inject as service } from '@ember/service';
 import AuthMixin from '../../mixins/auth';
-import TooltipMixin from '../../mixins/tooltip';
 import ModalMixin from '../../mixins/modal';
 import Notifier from '../../mixins/notifier';
 import Component from '@ember/component';
 
-export default Component.extend(ModalMixin, TooltipMixin, AuthMixin, Notifier, {
+export default Component.extend(ModalMixin, AuthMixin, Notifier, {
 	store: service(),
 	spaceSvc: service('folder'),
 	session: service(),
@@ -49,7 +48,6 @@ export default Component.extend(ModalMixin, TooltipMixin, AuthMixin, Notifier, {
 			this.set('pinState.pinId', pinId);
 			this.set('pinState.isPinned', pinId !== '');
 			this.set('pinState.newName', doc.get('name'));
-			this.renderTooltips();
 		});
 
 		this.set('saveTemplate.name', this.get('document.name'));
@@ -63,7 +61,6 @@ export default Component.extend(ModalMixin, TooltipMixin, AuthMixin, Notifier, {
 
 	willDestroyElement() {
 		this._super(...arguments);
-		this.removeTooltips();
 	},
 
 	actions: {
@@ -80,11 +77,9 @@ export default Component.extend(ModalMixin, TooltipMixin, AuthMixin, Notifier, {
 
 		onUnpin() {
 			this.get('pinned').unpinItem(this.get('pinState.pinId')).then(() => {
-				$('#document-pin-button').tooltip('dispose');
 				this.set('pinState.isPinned', false);
 				this.set('pinState.pinId', '');
 				this.eventBus.publish('pinChange');
-				this.renderTooltips();
 			});
 		},
 
@@ -96,11 +91,9 @@ export default Component.extend(ModalMixin, TooltipMixin, AuthMixin, Notifier, {
 			};
 
 			this.get('pinned').pinItem(pin).then((pin) => {
-				$('#document-pin-button').tooltip('dispose');
 				this.set('pinState.isPinned', true);
 				this.set('pinState.pinId', pin.get('id'));
 				this.eventBus.publish('pinChange');
-				this.renderTooltips();
 			});
 
 			return true;

gui/app/components/toolbar/for-space.js

@@ -13,13 +13,12 @@ import $ from 'jquery';
 import { computed } from '@ember/object';
 import { schedule } from '@ember/runloop';
 import { inject as service } from '@ember/service';
-import TooltipMixin from '../../mixins/tooltip';
 import ModalMixin from '../../mixins/modal';
 import AuthMixin from '../../mixins/auth';
 import Notifier from '../../mixins/notifier';
 import Component from '@ember/component';
 
-export default Component.extend(ModalMixin, TooltipMixin, AuthMixin, Notifier, {
+export default Component.extend(ModalMixin, AuthMixin, Notifier, {
 	spaceService: service('folder'),
 	localStorage: service(),
 	templateService: service('template'),
@@ -75,7 +74,6 @@ export default Component.extend(ModalMixin, TooltipMixin, AuthMixin, Notifier, {
 			this.set('pinState.pinId', pinId);
 			this.set('pinState.isPinned', pinId !== '');
 			this.set('pinState.newName', folder.get('name'));
-			this.renderTooltips();
 		});
 
 		let cats = this.get('categories');
@@ -92,7 +90,6 @@ export default Component.extend(ModalMixin, TooltipMixin, AuthMixin, Notifier, {
 
 	willDestroyElement() {
 		this._super(...arguments);
-		this.removeTooltips();
 
 		if (is.not.null(this.get('dropzone'))) {
 			this.get('dropzone').destroy();
@@ -152,11 +149,9 @@ export default Component.extend(ModalMixin, TooltipMixin, AuthMixin, Notifier, {
 	actions: {
 		onUnpin() {
 			this.get('pinned').unpinItem(this.get('pinState.pinId')).then(() => {
-				$('#space-pin-button').tooltip('dispose');
 				this.set('pinState.isPinned', false);
 				this.set('pinState.pinId', '');
 				this.eventBus.publish('pinChange');
-				this.renderTooltips();
 			});
 		},
 
@@ -168,11 +163,9 @@ export default Component.extend(ModalMixin, TooltipMixin, AuthMixin, Notifier, {
 			};
 
 			this.get('pinned').pinItem(pin).then((pin) => {
-				$('#space-pin-button').tooltip('dispose');
 				this.set('pinState.isPinned', true);
 				this.set('pinState.pinId', pin.get('id'));
 				this.eventBus.publish('pinChange');
-				this.renderTooltips();
 			});
 
 			return true;

gui/app/components/ui/ui-avatar.js

@@ -10,10 +10,6 @@
 // https://documize.com
 
 import Component from '@ember/component';
-import TooltipMixin from '../../mixins/tooltip';
 
-export default Component.extend(TooltipMixin, {
+export default Component.extend({
-	didRender() {
-		this.renderTooltips();
-	},
 });

gui/app/mixins/tooltip.js

@@ -1,38 +0,0 @@
-// Copyright 2016 Documize Inc. <legal@documize.com>. All rights reserved.
-//
-// This software (Documize Community Edition) is licensed under
-// GNU AGPL v3 http://www.gnu.org/licenses/agpl-3.0.en.html
-//
-// You can operate outside the AGPL restrictions by purchasing
-// Documize Enterprise Edition and obtaining a commercial license
-// by contacting <sales@documize.com>.
-//
-// https://documize.com
-
-import $ from 'jquery';
-import Mixin from '@ember/object/mixin';
-import { schedule } from '@ember/runloop';
-
-export default Mixin.create({
-	renderTooltips() {
-		schedule('afterRender', () => {
-			$('[data-toggle="tooltip"]').tooltip('dispose');
-			$('body').tooltip({selector: '[data-toggle="tooltip"]', delay: { "show": 1000, "hide": 100 }});
-		});
-	},
-
-	removeTooltips() {
-		$('[data-toggle="tooltip"]').tooltip('dispose');
-	},
-
-	renderPopovers() {
-		schedule('afterRender', () => {
-			$('[data-toggle="popover"]').popover('dispose');
-			$('body').popover({selector: '[data-toggle="popover"]', delay: 250});
-		});
-	},
-
-	removePopovers() {
-		$('[data-toggle="tooltip"]').popover('dispose');
-	}
-});

gui/app/pods/document/index/controller.js

@@ -12,11 +12,10 @@
 import { Promise as EmberPromise } from 'rsvp';
 import { inject as service } from '@ember/service';
 import { computed } from '@ember/object';
-import Tooltips from '../../../mixins/tooltip';
 import Notifier from '../../../mixins/notifier';
 import Controller from '@ember/controller';
 
-export default Controller.extend(Tooltips, Notifier, {
+export default Controller.extend(Notifier, {
 	documentService: service('document'),
 	templateService: service('template'),
 	sectionService: service('section'),

gui/app/routes/application.js

@@ -12,10 +12,9 @@
 import { inject as service } from '@ember/service';
 import ApplicationRouteMixin from 'ember-simple-auth/mixins/application-route-mixin';
 import netUtil from '../utils/net';
-import TooltipMixin from '../mixins/tooltip';
 import Route from '@ember/routing/route';
 
-export default Route.extend(ApplicationRouteMixin, TooltipMixin, {
+export default Route.extend(ApplicationRouteMixin, {
 	appMeta: service(),
 	session: service(),
 	pinned: service(),
@@ -55,7 +54,6 @@ export default Route.extend(ApplicationRouteMixin, TooltipMixin, {
 	actions: {
 		willTransition: function( /*transition*/ ) {
 			Mousetrap.reset();
-			this.removeTooltips();
 		},
 
 		error(error, transition) {

gui/app/styles/core/bootstrap.scss

@@ -25,15 +25,6 @@ $secondary:		map-get($gray-shades, 600);
 $light: 		$color-white;
 $dark:			$color-black-light-1;
 
-// popover
-$popover-bg: 			$color-white;
-$popover-header-bg: 	map-get($gray-shades, 800);
-$popover-header-color:	$color-white;
-
-// tooltip
-$tooltip-bg:	map-get($gray-shades, 800);
-$tooltip-color:	$color-white;
-
 // modal
 $modal-backdrop-opacity: 		0.5;
 $modal-header-border-color:		$color-white;
@@ -53,14 +44,6 @@ $border-radius:		.125rem;
 $border-radius-lg:  .15rem;
 $border-radius-sm:  .1rem;
 
-// dropdown
-$dropdown-link-color:               $color-black-light-1;
-$dropdown-link-hover-color:         $color-link;
-$dropdown-link-hover-bg:          	$color-white;
-$dropdown-link-active-color:        $color-link;
-$dropdown-link-active-bg:           $color-white;
-$dropdown-header-color:				$color-black;
-
 // form
 $input-color:               $color-black-light-1;
 $input-border-color:        map-get($gray-shades, 200);
@@ -110,16 +93,12 @@ $link-hover-decoration:     none;
 @import "node_modules/bootstrap/scss/grid";
 @import "node_modules/bootstrap/scss/buttons";
 @import "node_modules/bootstrap/scss/button-group";
-@import "node_modules/bootstrap/scss/dropdown";
 @import "node_modules/bootstrap/scss/forms";
 @import "node_modules/bootstrap/scss/custom-forms";
 @import "node_modules/bootstrap/scss/input-group";
 @import "node_modules/bootstrap/scss/modal";
 @import "node_modules/bootstrap/scss/utilities";
-@import "node_modules/bootstrap/scss/popover";
-@import "node_modules/bootstrap/scss/tooltip";
 @import "node_modules/bootstrap/scss/tables";
-@import "node_modules/bootstrap/scss/badge";
 
 // Boostrap overrides
 .modal-80 {
@@ -148,26 +127,6 @@ body.modal-open {
 	}
 }
 
-.popover-header {
-	font-size: 1.2rem;
-}
-
-.popover-body {
-	font-size: 1rem;
-
-	> p {
-		margin: 0.5rem 0;
-	}
-
-	> ul {
-		margin: 10px 0 10px 25px;
-
-		> li {
-			list-style: square;
-		}
-	}
-}
-
 .btn {
 	text-transform: uppercase;
 	font-weight: 600;

gui/app/styles/core/section/jira.scss

@@ -16,3 +16,10 @@
 	height: 16px;
 	width: 16px;
 }
+
+.seciton-jira-status {
+	padding: 3px 5px;
+	font-size: 0.9rem;
+	background-color: map-get($yellow-shades, 600);
+	color: $color-white;
+}

gui/app/templates/components/customize/space-admin.hbs

@@ -17,12 +17,14 @@
 						{{#link-to 'folder' space.id space.slug class="alt"}}{{space.name}}{{/link-to}}
 					</div>
 					<div class="col-12 col-sm-4 text-right">
-						<div id="space-ownership-button-{{space.id}}" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Add myself as space owner" {{action "onOwner" space.id}}>
+						<div id="space-ownership-button-{{space.id}}" class="button-icon-gray align-middle" {{action "onOwner" space.id}}>
 							<i class="material-icons" data-toggle="modal">person_add</i>
+							{{#attach-tooltip showDelay=1000}}Add myself as space owner{{/attach-tooltip}}
 						</div>
 						<div class="button-icon-gap" />
-						<div id="space-delete-button-{{space.id}}" class="button-icon-danger align-middle" data-toggle="tooltip" data-placement="top" title="Delete space and all content" {{action "onShow" space.id}}>
+						<div id="space-delete-button-{{space.id}}" class="button-icon-danger align-middle" {{action "onShow" space.id}}>
 							<i class="material-icons" data-toggle="modal" data-target="#space-delete-modal" data-backdrop="static">delete</i>
+							{{#attach-tooltip showDelay=1000}}Delete space and all content{{/attach-tooltip}}
 						</div>
 					</div>
 				</div>

gui/app/templates/components/customize/user-groups.hbs

@@ -31,6 +31,7 @@
 				</div>
 			</div>
 
+			<p>Put these as cards with nice action CTAs</p>
 			<div class="groups-list">
 				{{#each groups as |group|}}
 					<div class="row group">
@@ -49,12 +50,14 @@
 								<button class="btn btn-danger" {{action 'onShowRemoveMemberModal' group.id}}>Remove Member</button>
 							{{/if}}
 							<div class="button-icon-gap" />
-							<div class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Rename" {{action 'onShowEditModal' group.id}}>
+							<div class="button-icon-gray align-middle" {{action 'onShowEditModal' group.id}}>
 								<i class="material-icons">edit</i>
+								{{#attach-tooltip showDelay=1000}}Edit group{{/attach-tooltip}}
 							</div>
 							<div class="button-icon-gap" />
-							<div class="button-icon-danger align-middle" data-toggle="tooltip" data-placement="top" title="Delete" {{action 'onShowDeleteModal' group.id}}>
+							<div class="button-icon-danger align-middle"  {{action 'onShowDeleteModal' group.id}}>
 								<i class="material-icons">delete</i>
+								{{#attach-tooltip showDelay=1000}}Delete group{{/attach-tooltip}}
 							</div>
 						</div>
 					</div>
@@ -149,7 +152,8 @@
 							</div>
 							<div class="view-customize">
 								<div class="text-center">
-									<div class="btn-group btn-group-toggle" data-toggle="tooltip" data-placement="top" title="Show how many users">
+									<div class="btn-group btn-group-toggle">
+										{{#attach-tooltip showDelay=1000}}Number of users to display{{/attach-tooltip}}>
 										<label class="btn btn-outline-secondary {{if (eq userLimit 1) 'active'}}">
 											<input type="radio" name="options" autocomplete="off" {{action 'onLimit' 1}}>1
 										</label>

gui/app/templates/components/customize/user-list.hbs

@@ -41,7 +41,8 @@
 	</div>
 
 	<div class="max-results py-3">
-		<div class="btn-group btn-group-toggle" data-toggle="tooltip" data-placement="top" title="Show how many users">
+		<div class="btn-group btn-group-toggle">
+			{{#attach-tooltip showDelay=1000}}Number of users to display{{/attach-tooltip}}
 			<label class="btn btn-outline-secondary {{if (eq userLimit 1) 'active'}}">
 				<input type="radio" name="options" autocomplete="off" {{action 'onLimit' 1}}>1
 			</label>
@@ -157,11 +158,13 @@
 					<td class="no-width text-center">
 						<div class="user-button-{{user.id}} button-icon-gray button-icon-small" title="Edit" {{action "onShowEdit" user.id}}>
 							<i class="material-icons">mode_edit</i>
+							{{#attach-tooltip showDelay=1000}}Edit user{{/attach-tooltip}}
 						</div>
 						{{#unless user.me}}
 							<div class="button-icon-gap" />
 							<div class="delete-button-{{user.id}} button-icon-red button-icon-small" title="Delete" {{action "onShowDelete" user.id}}>
 								<i class="material-icons">delete</i>
+								{{#attach-tooltip showDelay=1000}}Delete user{{/attach-tooltip}}
 							</div>
 						{{/unless}}
 					</td>

gui/app/templates/components/document/add-section.hbs

@@ -38,7 +38,8 @@
 								{{#if hasBlocks}}
 									<ul class="block-list">
 										{{#each blocks as |block|}}
-											<li class="item" title="{{block.firstname}} {{block.lastname}}, {{time-ago block.created}}, used: {{ block.used }}" data-toggle="tooltip" data-placement="top">
+											<li class="item">
+												{{#attach-tooltip showDelay=1000}}Published by {{block.firstname}} {{block.lastname}}, {{time-ago block.created}} &mdash; used {{ block.used }} times{{/attach-tooltip}}
 												<div class="details" {{action 'onInsertBlock' block}}>
 													<div class="title text-truncate">{{block.title}}</div>
 													<div class="desc text-truncate">{{block.excerpt}}</div>

gui/app/templates/components/document/document-meta.hbs

@@ -22,15 +22,17 @@
 <div class="d-sm-inline-block margin-left-20" />
 
 {{#each selectedCategories as |cat|}}
-	<div class="document-category {{if isSpaceAdmin 'cursor-pointer'}}" data-toggle="tooltip" data-placement="top" title="Category" {{action 'onEditCategory'}}>
+	<div class="document-category {{if isSpaceAdmin 'cursor-pointer'}}" {{action 'onEditCategory'}}>
 		{{cat.category}}
+		{{#attach-tooltip showDelay=1000}}Category{{/attach-tooltip}}
 	</div>
 {{/each}}
 
 <div class="d-block d-sm-none margin-top-20" />
 
 {{#each tagz as |t index|}}
-	<div class="document-tag {{if isSpaceAdmin 'cursor-pointer'}}" data-toggle="tooltip" data-placement="top" title="Tag" {{action 'onEditCategory'}}>
+	<div class="document-tag {{if isSpaceAdmin 'cursor-pointer'}}" {{action 'onEditCategory'}}>
+		{{#attach-tooltip showDelay=1000}}Tag{{/attach-tooltip}}
 		{{concat '#' t}}
 	</div>
 {{/each}}

gui/app/templates/components/document/document-toc.hbs

@@ -1,7 +1,7 @@
 <div id="sidebar" class="sidebar-white document-sidebar">
 
 	<div class="sidebar-view-switcher d-flex align-items-center justify-content-center">
-		<i class="material-icons" title="Table of contents" data-toggle="tooltip" data-placement="top">reorder</i>
+		<i class="material-icons">reorder</i>
 	</div>
 
 	<div id="doc-toc" class="document-toc">
@@ -34,11 +34,13 @@
 						title={{item.page.title}}>
 						<span class="numbering">{{item.page.numbering}}</span>
 						{{#if (or item.userHasChangePending userHasNewPagePending)}}
-							<span class="color-red-600" title="Pending approval" data-toggle="tooltip" data-placement="top">[*]&nbsp;</span>
+							<span class="color-red-600" >[*]&nbsp;</span>
+							{{#attach-tooltip showDelay=1000}}Pending changes{{/attach-tooltip}}
 						{{/if}}
 						{{#if (or permissions.documentApprove roles.documentApprove)}}
 							{{#if item.changeAwaitingReview}}
-								<span class="color-green-700" title="Awaiting approval" data-toggle="tooltip" data-placement="top">[*]&nbsp;</span>
+								<span class="color-green-700">[*]&nbsp;</span>
+								{{#attach-tooltip showDelay=1000}}Awaiting approval{{/attach-tooltip}}
 							{{/if}}
 						{{/if}}
 						{{item.page.title}}

gui/app/templates/components/document/page-heading.hbs

@@ -19,40 +19,42 @@
 						{{/if}}
 						{{#if hasMenuPermissions}}
 							<div class="button-icon-gap" />
-							<div id="page-menu-button-{{page.id}}" class="button-icon-gray align-middle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+							<div id="page-menu-button-{{page.id}}" class="button-icon-gray align-middle">
 								<i class="material-icons">more_vert</i>
-							</div>
+								{{#attach-popover class="ember-attacher-popper" hideOn='clickout' showOn='click' isShown=false}}
-							<div class="dropdown-menu dropdown-menu-right" aria-labelledby="page-menu-button-{{page.id}}">
+									<div class="menu">
-								{{#if canEdit}}
+										{{#if canEdit}}
-									<a class="dropdown-item" href="#" id={{concat 'edit-page-button-' page.id}} {{action 'onEdit'}}>Edit</a>
+											<a class="item" href="#" id={{concat 'edit-page-button-' page.id}} {{action 'onEdit'}}>Edit</a>
-								{{/if}}
+										{{/if}}
-								{{#if permissions.documentCopy}}
+										{{#if permissions.documentCopy}}
-									<a class="dropdown-item" href="#" id={{concat 'copy-page-button-' page.id}} data-toggle="modal" data-target={{concat '#copy-page-modal-' page.id}} data-backdrop="static">Copy</a>
+											<a class="item" href="#" id={{concat 'copy-page-button-' page.id}} data-toggle="modal" data-target={{concat '#copy-page-modal-' page.id}} data-backdrop="static">Copy</a>
-								{{/if}}
+										{{/if}}
-								{{#if canMove}}
+										{{#if canMove}}
-									<a class="dropdown-item" href="#" id={{concat 'move-page-button-' page.id}} data-toggle="modal" data-target={{concat '#move-page-modal-' page.id}} data-backdrop="static">Move</a>
+											<a class="item" href="#" id={{concat 'move-page-button-' page.id}} data-toggle="modal" data-target={{concat '#move-page-modal-' page.id}} data-backdrop="static">Move</a>
-								{{/if}}
+										{{/if}}
-								{{#if permissions.documentTemplate}}
+										{{#if permissions.documentTemplate}}
-									<a class="dropdown-item" href="#" id={{concat 'publish-page-button-' page.id}} data-toggle="modal" data-target={{concat '#publish-page-modal-' page.id}} data-backdrop="static">Publish</a>
+											<a class="item" href="#" id={{concat 'publish-page-button-' page.id}} data-toggle="modal" data-target={{concat '#publish-page-modal-' page.id}} data-backdrop="static">Publish</a>
-								{{/if}}
+										{{/if}}
-								{{#if canDelete}}
+										{{#if canDelete}}
-									<a class="dropdown-item text-danger" href="#" id={{concat 'delete-page-button-' page.id}} data-toggle="modal" data-target={{concat '#delete-page-modal-' page.id}} data-backdrop="static">Delete</a>
+											<a class="item red" href="#" id={{concat 'delete-page-button-' page.id}} data-toggle="modal" data-target={{concat '#delete-page-modal-' page.id}} data-backdrop="static">Delete</a>
-								{{/if}}
+										{{/if}}
-								{{#if (and canEdit state.actionablePage)}}
+										{{#if (and canEdit state.actionablePage)}}
-									<div class="dropdown-divider"></div>
+											<div class="divider"></div>
-									{{#unless state.indentDisabled}}
+											{{#unless state.indentDisabled}}
-										<a class="dropdown-item" href="#" id={{concat 'toc-indent-button-' page.id}} {{action 'pageIndent'}}>Indent</a>
+												<a class="item" href="#" id={{concat 'toc-indent-button-' page.id}} {{action 'pageIndent'}}>Indent</a>
-									{{/unless}}
+											{{/unless}}
-									{{#unless state.outdentDisabled}}
+											{{#unless state.outdentDisabled}}
-										<a class="dropdown-item" href="#" id={{concat 'toc-outdent-button-' page.id}} {{action 'pageOutdent'}}>Outdent</a>
+												<a class="item" href="#" id={{concat 'toc-outdent-button-' page.id}} {{action 'pageOutdent'}}>Outdent</a>
-									{{/unless}}
+											{{/unless}}
-									{{#unless state.upDisabled}}
+											{{#unless state.upDisabled}}
-										<a class="dropdown-item" href="#" id={{concat 'toc-up-button-' page.id}} {{action 'pageUp'}}>Move up</a>
+												<a class="item" href="#" id={{concat 'toc-up-button-' page.id}} {{action 'pageUp'}}>Move up</a>
-									{{/unless}}
+											{{/unless}}
-									{{#unless state.downDisabled}}
+											{{#unless state.downDisabled}}
-										<a class="dropdown-item" href="#" id={{concat 'toc-down-button-' page.id}} {{action 'pageDown'}}>Move down</a>
+												<a class="item" href="#" id={{concat 'toc-down-button-' page.id}} {{action 'pageDown'}}>Move down</a>
-									{{/unless}}
+											{{/unless}}
-								{{/if}}
+										{{/if}}
+									</div>
+								{{/attach-popover}}
 							</div>
 						{{/if}}
 					</div>

gui/app/templates/components/folder/documents-list.hbs

@@ -22,18 +22,21 @@
 					</div>
 					{{#if document.selected}}
 						<div class="actions">
-							<div class="move-documents-button button-icon-green button-icon-small align-middle" {{action 'onExport'}} data-toggle="tooltip" data-placement="top" title="Export as HTML">
+							<div class="move-documents-button button-icon-green button-icon-small align-middle" {{action 'onExport'}}>
 								<i class="material-icons">import_export</i>
+								{{#attach-tooltip showDelay=1000}}Export as HTML{{/attach-tooltip}}
 							</div>
 							<div class="button-icon-gap" />
 							{{#if permissions.documentMove}}
-								<div class="move-documents-button button-icon-green button-icon-small align-middle" {{action 'onShowMoveDocuments'}} data-toggle="tooltip" data-placement="top" title="Move">
+								<div class="move-documents-button button-icon-green button-icon-small align-middle" {{action 'onShowMoveDocuments'}}>
 									<i class="material-icons">compare_arrows</i>
+									{{#attach-tooltip showDelay=1000}}Move{{/attach-tooltip}}
 								</div>
 								<div class="button-icon-gap" />
 							{{/if}}
 							{{#if permissions.documentDelete}}
-								<div class="delete-documents-button button-icon-red button-icon-small align-middle" {{action 'onShowDeleteDocuments'}} data-toggle="tooltip" data-placement="top" title="Delete">
+								<div class="delete-documents-button button-icon-red button-icon-small align-middle" {{action 'onShowDeleteDocuments'}}>
+									{{#attach-tooltip showDelay=1000}}Delete{{/attach-tooltip}}
 									<i class="material-icons">delete</i>
 								</div>
 							{{/if}}

gui/app/templates/components/folder/settings-category.hbs

@@ -30,15 +30,18 @@
 							<button type="button" class="btn btn-outline-secondary" {{action 'onEditCancel' cat.id}}>Cancel</button>
 							<button type="button" class="btn btn-success"  {{action 'onSave' cat.id}}>Save</button>
 						{{else}}
-							<div id="category-access-button-{{cat.id}}" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Category access" {{action 'onShowAccessPicker' cat.id}}>
+							<div id="category-access-button-{{cat.id}}" class="button-icon-gray align-middle" {{action 'onShowAccessPicker' cat.id}}>
+								{{#attach-tooltip showDelay=1000}}Category view permission{{/attach-tooltip}}
 								<i class="material-icons">security</i>
 							</div>
 							<div class="button-icon-gap" />
-							<div class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Rename" {{action 'onEdit' cat.id}} >
+							<div class="button-icon-gray align-middle" {{action 'onEdit' cat.id}} >
+								{{#attach-tooltip showDelay=1000}}Rename{{/attach-tooltip}}
 								<i class="material-icons">edit</i>
 							</div>
 							<div class="button-icon-gap" />
-							<div id="{{concat 'delete-category-' cat.id}}" class="button-icon-danger align-middle" data-toggle="tooltip" data-placement="top" title="Delete" {{action 'onShowDelete' cat.id}}>
+							<div id="{{concat 'delete-category-' cat.id}}" class="button-icon-danger align-middle" {{action 'onShowDelete' cat.id}}>
+								{{#attach-tooltip showDelay=1000}}Delete{{/attach-tooltip}}
 								<i class="material-icons">delete</i>
 							</div>
 						{{/if}}

gui/app/templates/components/folder/settings-permissions.hbs

@@ -38,15 +38,13 @@
 			{{#each spacePermissions as |permission|}}
 				<tr>
 					<td class="no-wrap no-width">
-						<i class="material-icons align-top text-secondary cursor-pointer" data-toggle="dropdown" aria-haspopup="true"
+						<i class="material-icons align-top text-secondary cursor-pointer">more_vert</i>
-							 aria-expanded="false">
+						{{#attach-popover class="ember-attacher-popper" hideOn='clickout' showOn='click' isShown=false}}
-							 more_vert
+							<div class="menu">
-						</i>
+								<a class="item" href="#" {{action 'onBulkPermission' permission true}}>Grant all</a>
-						<div class="dropdown-menu dropdown-menu-left" aria-labelledby="permission-dropdown-{{permission.whoId}}">
+								<a class="item" href="#" {{action 'onBulkPermission' permission false}}>Revoke all</a>
-							<a class="dropdown-item" href="#" {{action 'onBulkPermission' permission true}}>Grant all</a>
+							</div>
-							<a class="dropdown-item" href="#" {{action 'onBulkPermission' permission false}}>Revoke all</a>
+						{{/attach-popover}}
-						</div>
-
 						{{#if (eq permission.who "role")}}
 							<span class="button-icon-blue button-icon-small align-middle">
 								<i class="material-icons">people</i>

gui/app/templates/components/layout/top-bar.hbs

@@ -57,9 +57,7 @@
 				<div class="buttons d-flex flex-wrap align-items-center">
 					{{#unless appMeta.valid}}
 						<div class="btn-group">
-							<div class="button-icon-gold animated infinite wobble slow delay-2s"
+							<div class="button-icon-gold animated infinite wobble slow delay-2s" {{action 'onBilling'}}>
-								data-toggle="tooltip" data-placement="bottom" title="Please select product plan"
-								{{action 'onBilling'}}>
 								<i class="material-icons">report</i>
 							</div>
 						</div>

gui/app/templates/components/section/base-editor-inline.hbs

@@ -21,7 +21,10 @@
 				{{/if}}
 
 				{{#if contentLinkerButton}}
-					<div class="btn btn-primary" id="section-editor-link-button-{{pageId}}" data-toggle="tooltip" data-placement="top" title="Insert link" {{action 'onShowLinkModal'}}>Link</div>
+					<div class="btn btn-primary" id="section-editor-link-button-{{pageId}}" {{action 'onShowLinkModal'}}>
+						Link
+						{{#attach-tooltip showDelay=1000}}Insert Link{{/attach-tooltip}}
+					</div>
 				{{/if}}
 
 				{{#if previewButton}}

gui/app/templates/components/section/gemini/type-editor.hbs

@@ -26,7 +26,8 @@
 				<label>Select Gemini workspace</label>
 				<ul class="section-gemini-workspaces">
 					{{#each workspaces as |card|}}
-						<li class="section-gemini-workspace" title="{{card.Title}}" data-toggle="tooltip" data-placement="top" id="gemini-workspace-{{card.Id}}">
+						<li class="section-gemini-workspace" id="gemini-workspace-{{card.Id}}">
+							{{#attach-tooltip showDelay=1000}}{{card.Title}}{{/attach-tooltip}}
 							<div class="section-gemini-card" style="background-color:{{card.Color}};" {{action 'onWorkspaceChange' card.Id}}>{{card.Key}}</div>
 							{{#if card.selected}}
 								<div class="section-gemini-selected-card">&#10003;</div>

gui/app/templates/components/toolbar/for-document.hbs

@@ -2,43 +2,50 @@
 	{{#if session.authenticated}}
 		{{#if permissions.documentEdit}}
 			{{#link-to 'document.settings' space.id space.slug document.id document.slug class="button-icon-gray align-middle"}}
-				<i class="material-icons" data-toggle="tooltip" data-placement="top" title="Meta, Lifecycle, Change Control">settings</i>
+				<i class="material-icons">settings</i>
+				{{#attach-tooltip showDelay=1000}}Settings &mdash; meta, lifecycle, workflow{{/attach-tooltip}}
 			{{/link-to}}
 			<div class="button-icon-gap" />
 		{{/if}}
 		{{#if permissions.documentAdd}}
-			<div id="document-template-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Save as template">
+			<div id="document-template-button" class="button-icon-gray align-middle">
 				<i class="material-icons" data-toggle="modal" data-target="#document-template-modal" data-backdrop="static">content_copy</i>
+				{{#attach-tooltip showDelay=1000}}Save as template{{/attach-tooltip}}
 			</div>
 			<div class="button-icon-gap" />
 		{{/if}}
 	{{/if}}
 
-	<div id="document-print-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Print" {{action 'onPrintDocument'}}>
+	<div id="document-print-button" class="button-icon-gray align-middle" {{action 'onPrintDocument'}}>
 		<i class="material-icons">print</i>
+		{{#attach-tooltip showDelay=1000}}Print{{/attach-tooltip}}
 	</div>
 	<div class="button-icon-gap" />
 
-	<div id="space-export-button" class="button-icon-danger align-middle" data-toggle="tooltip" data-placement="top" title="Export as HTML" {{action 'onExport'}}>
+	<div id="space-export-button" class="button-icon-danger align-middle" {{action 'onExport'}}>
 		<i class="material-icons">import_export</i>
+		{{#attach-tooltip showDelay=1000}}Export as HTML{{/attach-tooltip}}
 	</div>
 	<div class="button-icon-gap" />
 
 	{{#if pinState.isPinned}}
-		<div id="document-pin-button" class="button-icon-gold align-middle" data-toggle="tooltip" data-placement="top" title="Remove favorite" {{action 'onUnpin'}}>
+		<div id="document-pin-button" class="button-icon-gold align-middle" {{action 'onUnpin'}}>
 			<i class="material-icons">star</i>
+			{{#attach-tooltip showDelay=1000}}Remove bookmark{{/attach-tooltip}}
 		</div>
 		<div class="button-icon-gap" />
 	{{else if session.authenticated}}
-		<div id="document-pin-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Save favorite" {{action 'onPin'}}>
+		<div id="document-pin-button" class="button-icon-gray align-middle" {{action 'onPin'}}>
 			<i class="material-icons">star</i>
+			{{#attach-tooltip showDelay=1000}}Add bookmark{{/attach-tooltip}}
 		</div>
 		<div class="button-icon-gap" />
 	{{/if}}
 
 	{{#if permissions.documentDelete}}
-		<div id="document-delete-button" class="button-icon-danger align-middle" data-toggle="tooltip" data-placement="top" title="Delete document">
+		<div id="document-delete-button" class="button-icon-danger align-middle">
 			<i class="material-icons" data-toggle="modal" data-target="#document-delete-modal" data-backdrop="static">delete</i>
+			{{#attach-tooltip showDelay=1000}}Delete{{/attach-tooltip}}
 		</div>
 	{{/if}}
 </div>

gui/app/templates/components/toolbar/for-space.hbs

@@ -3,14 +3,18 @@
 	<div class="col-6">
 		{{#if permissions.documentAdd}}
 			<div class="btn-group" role="group">
-				<button id="btnGroupDocument" type="button" class="btn btn-success font-weight-bold dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">+ CONTENT</button>
+				<button id="btnGroupDocument" type="button" class="btn btn-success font-weight-bold dropdown-toggle">
-				<div class="dropdown-menu" aria-labelledby="btnGroupDocument">
+					+ CONTENT
-					<a class="dropdown-item" href="#" {{action 'onShowEmptyDocModal'}}>Blank canvas</a>
+					{{#attach-popover class="ember-attacher-popper" hideOn='clickout' showOn='click' isShown=false}}
-					{{#if hasTemplates}}
+						<div class="menu">
-						<a class="dropdown-item" href="#" {{action 'onShowTemplateDocModal'}}>From template</a>
+							<a class="item" href="#" {{action 'onShowEmptyDocModal'}}>Blank canvas</a>
-					{{/if}}
+							{{#if hasTemplates}}
-					<a class="dropdown-item" href="#" {{action 'onShowImportDocModal'}}>Import files</a>
+								<a class="item" href="#" {{action 'onShowTemplateDocModal'}}>From template</a>
-				</div>
+							{{/if}}
+							<a class="item" href="#" {{action 'onShowImportDocModal'}}>Import files</a>
+						</div>
+					{{/attach-popover}}
+				</button>
 			</div>
 			<div id="empty-doc-modal" class="modal" tabindex="-1" role="dialog">
 				<div class="modal-dialog" role="document">
@@ -95,27 +99,31 @@
 
 	<div class="col-6 text-right">
 		{{#if hasDocuments}}
-			<div id="space-export-button" class="button-icon-danger align-middle" data-toggle="tooltip" data-placement="top" title="Export as HTML" {{action 'onShowExport'}}>
+			<div id="space-export-button" class="button-icon-danger align-middle" {{action 'onShowExport'}}>
 				<i class="material-icons">import_export</i>
+				{{#attach-tooltip showDelay=1000}}Export as HTML{{/attach-tooltip}}
 			</div>
 		{{/if}}
 
 		{{#if pinState.isPinned}}
 			<div class="button-icon-gap" />
-			<div id="space-pin-button" class="button-icon-gold align-middle" data-toggle="tooltip" data-placement="top" title="Remove favorite" {{action 'onUnpin'}}>
+			<div id="space-pin-button" class="button-icon-gold align-middle" {{action 'onUnpin'}}>
 				<i class="material-icons">star</i>
+				{{#attach-tooltip showDelay=1000}}Remove bookmark{{/attach-tooltip}}
 			</div>
 		{{else if session.authenticated}}
 			<div class="button-icon-gap" />
-			<div id="space-pin-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Save favorite" {{action 'onPin'}}>
+			<div id="space-pin-button" class="button-icon-gray align-middle" {{action 'onPin'}}>
 				<i class="material-icons">star</i>
+				{{#attach-tooltip showDelay=1000}}Bookmark{{/attach-tooltip}}
 			</div>
 		{{/if}}
 
 		{{#if (or permissions.spaceOwner permissions.spaceManage)}}
 			<div class="button-icon-gap" />
 			{{#link-to 'folder.settings' space.id space.slug class="button-icon-gray align-middle"}}
-				<i class="material-icons" data-toggle="tooltip" data-placement="top" title="Settings, users, permissions, templates">settings</i>
+				<i class="material-icons">settings</i>
+				{{#attach-tooltip showDelay=1000}}Settings, permissions, templates{{/attach-tooltip}}
 			{{/link-to}}
 		{{/if}}
 	</div>

gui/app/templates/components/ui/ui-avatar.hbs

@@ -1,3 +1,4 @@
-<div class="avatar" id="avatar-{{refId}}" title="{{firstname}} {{lastname}}" data-toggle="tooltip" data-placement="top">
+<div class="avatar" id="avatar-{{refId}}">
 	{{user-initials firstname lastname}}
+	{{#attach-tooltip showDelay=1000}}{{firstname}}{{lastname}}{{/attach-tooltip}}
 </div>

gui/config/environment.js

@@ -18,7 +18,6 @@ module.exports = function (environment) {
 		locationType: 'auto',
 		environment: environment,
 		rootURL: '/',
-		// baseURL: '/',
 		apiHost: '',
 		apiNamespace: '',
 		contentSecurityPolicyHeader: 'Content-Security-Policy-Report-Only',
@@ -33,10 +32,9 @@ module.exports = function (environment) {
 			FEATURES: {}
 		},
 
-		// Tooltips & Popover component defaults
+		// Ember Attacher: tooltips & popover component defaults
 		emberAttacher: {
-			arrow: false,
+			arrow: false
-			// showDelay: 1000
 		},
 
 		"ember-cli-mirage": {

gui/tests/.eslintrc.js

@@ -24,7 +24,6 @@ module.exports = {
 		"Sortable": true,
 		"moment": true,
 		"Dropzone": true,
-		"Tooltip": true,
 		"server": true,
 		"authenticateUser": true,
 		"stubAudit": true,