Rewrite tooltips code without jQuery

app/Helper/AppHelper.php

@@ -12,6 +12,16 @@ use Kanboard\Core\Base;
  */
 class AppHelper extends Base
 {
+    public function tooltipMarkdown($markdownText, $icon = 'fa-info-circle')
+    {
+        return '<span class="tooltip"><i class="fa '.$icon.'"></i><script type="text/template"><div class="markdown">'.$this->helper->text->markdown($markdownText).'</div></script></span>';
+    }
+
+    public function tooltipLink($label, $link)
+    {
+        return '<span class="tooltip" data-href="'.$link.'">'.$label.'</span>';
+    }
+
     public function getToken()
     {
         return $this->token;

app/Helper/TextHelper.php

@@ -51,18 +51,6 @@ class TextHelper extends Base
         return $parser->text($text);
     }
 
-    /**
-     * Escape Markdown text that need to be stored in HTML attribute
-     *
-     * @access public
-     * @param  string $text
-     * @return mixed
-     */
-    public function markdownAttribute($text)
-    {
-        return htmlentities($this->markdown($text), ENT_QUOTES, 'UTF-8');
-    }
-
     /**
      * Format a file size
      *

app/Template/board/table_column.php

@@ -68,11 +68,8 @@
                 <?php endif ?>
 
                 <?php if (! $not_editable && ! empty($column['description'])): ?>
-                    <span class="tooltip" title="<?= $this->text->markdownAttribute($column['description']) ?>">
+                    <?= $this->app->tooltipMarkdown($column['description']) ?>
-                        &nbsp;<i class="fa fa-info-circle"></i>
-                    </span>
                 <?php endif ?>
-
             </span>
 
             <?php if (! empty($column['column_nb_tasks'])): ?>

app/Template/board/table_swimlane.php

@@ -11,12 +11,7 @@
         <?= $this->text->e($swimlane['name']) ?>
 
         <?php if (! $not_editable && ! empty($swimlane['description'])): ?>
-            <span
+            <?= $this->app->tooltipLink('<i class="fa fa-info-circle"></i>', $this->url->href('BoardTooltipController', 'swimlane', array('swimlane_id' => $swimlane['id'], 'project_id' => $project['id']))) ?>
-                title="<?= t('Description') ?>"
-                class="tooltip"
-                data-href="<?= $this->url->href('BoardTooltipController', 'swimlane', array('swimlane_id' => $swimlane['id'], 'project_id' => $project['id'])) ?>">
-                <i class="fa fa-info-circle"></i>
-            </span>
         <?php endif ?>
 
         <span title="<?= t('Task count') ?>" class="board-column-header-task-count swimlane-task-count-<?= $swimlane['id'] ?>">

app/Template/board/table_tasks.php

@@ -31,7 +31,7 @@
                 data-task-limit="<?= $column['task_limit'] ?>">
                 <div class="board-rotation-wrapper">
                     <div class="board-column-title board-rotation board-toggle-column-view" data-column-id="<?= $column['id'] ?>" title="<?= t('Show this column') ?>">
-                        <i class="fa fa-plus-square tooltip" title="<?= $this->text->e($column['title']) ?>"></i> <?= $this->text->e($column['title']) ?>
+                        <i class="fa fa-plus-square" title="<?= $this->text->e($column['title']) ?>"></i> <?= $this->text->e($column['title']) ?>
                     </div>
                 </div>
             </div>

app/Template/board/task_footer.php

@@ -11,8 +11,11 @@
                 array('task_id' => $task['id'], 'project_id' => $task['project_id']),
                 false,
                 'js-modal-medium' . (! empty($task['category_description']) ? ' tooltip' : ''),
-                ! empty($task['category_description']) ? $this->text->markdownAttribute($task['category_description']) : t('Change category')
+                t('Change category')
             ) ?>
+            <?php if (! empty($task['category_description'])): ?>
+                <?= $this->app->tooltipMarkdown($task['category_description']) ?>
+            <?php endif ?>
         <?php endif ?>
     </span>
 </div>
@@ -72,27 +75,27 @@
     <div class="task-board-icons-row">
 
         <?php if ($task['recurrence_status'] == \Kanboard\Model\TaskModel::RECURRING_STATUS_PENDING): ?>
-            <span title="<?= t('Recurrence') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'recurrence', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-refresh fa-rotate-90"></i></span>
+            <?= $this->app->tooltipLink('<i class="fa fa-refresh fa-rotate-90"></i>', $this->url->href('BoardTooltipController', 'recurrence', array('task_id' => $task['id'], 'project_id' => $task['project_id']))) ?>
         <?php endif ?>
 
         <?php if ($task['recurrence_status'] == \Kanboard\Model\TaskModel::RECURRING_STATUS_PROCESSED): ?>
-            <span title="<?= t('Recurrence') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'recurrence', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-refresh fa-rotate-90 fa-inverse"></i></span>
+            <?= $this->app->tooltipLink('<i class="fa fa-refresh fa-rotate-90 fa-inverse"></i>', $this->url->href('BoardTooltipController', 'recurrence', array('task_id' => $task['id'], 'project_id' => $task['project_id']))) ?>
         <?php endif ?>
 
         <?php if (! empty($task['nb_links'])): ?>
-            <span title="<?= t('Links') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'tasklinks', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-code-fork fa-fw"></i><?= $task['nb_links'] ?></span>
+            <?= $this->app->tooltipLink('<i class="fa fa-code-fork fa-fw"></i>'.$task['nb_links'], $this->url->href('BoardTooltipController', 'tasklinks', array('task_id' => $task['id'], 'project_id' => $task['project_id']))) ?>
         <?php endif ?>
 
         <?php if (! empty($task['nb_external_links'])): ?>
-            <span title="<?= t('External links') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'externallinks', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-external-link fa-fw"></i><?= $task['nb_external_links'] ?></span>
+            <?= $this->app->tooltipLink('<i class="fa fa-external-link fa-fw"></i>'.$task['nb_external_links'], $this->url->href('BoardTooltipController', 'externallinks', array('task_id' => $task['id'], 'project_id' => $task['project_id']))) ?>
         <?php endif ?>
 
         <?php if (! empty($task['nb_subtasks'])): ?>
-            <span title="<?= t('Sub-Tasks') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'subtasks', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-bars"></i>&nbsp;<?= round($task['nb_completed_subtasks']/$task['nb_subtasks']*100, 0).'%' ?></span>
+            <?= $this->app->tooltipLink('<i class="fa fa-bars fa-fw"></i>'.round($task['nb_completed_subtasks'] / $task['nb_subtasks'] * 100, 0).'%', $this->url->href('BoardTooltipController', 'subtasks', array('task_id' => $task['id'], 'project_id' => $task['project_id']))) ?>
         <?php endif ?>
 
         <?php if (! empty($task['nb_files'])): ?>
-            <span title="<?= t('Attachments') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'attachments', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-paperclip"></i>&nbsp;<?= $task['nb_files'] ?></span>
+            <?= $this->app->tooltipLink('<i class="fa fa-paperclip fa-fw"></i>'.$task['nb_files'], $this->url->href('BoardTooltipController', 'attachments', array('task_id' => $task['id'], 'project_id' => $task['project_id']))) ?>
         <?php endif ?>
 
         <?php if ($task['nb_comments'] > 0): ?>
@@ -111,9 +114,7 @@
         <?php endif ?>
 
         <?php if (! empty($task['description'])): ?>
-            <span title="<?= t('Description') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'description', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>">
+            <?= $this->app->tooltipLink('<i class="fa fa-file-text-o"></i>', $this->url->href('BoardTooltipController', 'description', array('task_id' => $task['id'], 'project_id' => $task['project_id']))) ?>
-                <i class="fa fa-file-text-o"></i>
-            </span>
         <?php endif ?>
 
         <?php if ($task['is_active'] == 1): ?>

app/Template/category/index.php

@@ -31,9 +31,7 @@
                 <?= $this->text->e($category['name']) ?>
 
                 <?php if (! empty($category['description'])): ?>
-                    <span class="tooltip" title="<?= $this->text->markdownAttribute($category['description']) ?>">
+                    <?= $this->app->tooltipMarkdown($category['description']) ?>
-                        <i class="fa fa-info-circle"></i>
-                    </span>
                 <?php endif ?>
             </td>
         </tr>

app/Template/column/index.php

@@ -42,9 +42,7 @@
                 </div>
                 <?= $this->text->e($column['title']) ?>
                 <?php if (! empty($column['description'])): ?>
-                    <span class="tooltip" title="<?= $this->text->markdownAttribute($column['description']) ?>">
+                    <?= $this->app->tooltipMarkdown($column['description']) ?>
-                        <i class="fa fa-info-circle"></i>
-                    </span>
                 <?php endif ?>
             </td>
             <td>

app/Template/header/title.php

@@ -10,8 +10,6 @@
         <?php endif ?>
     </span>
     <?php if (! empty($description)): ?>
-        <small class="tooltip" title="<?= $this->text->markdownAttribute($description) ?>">
+        <?= $this->app->tooltipMarkdown($description) ?>
-            <i class="fa fa-info-circle"></i>
-        </small>
     <?php endif ?>
 </h1>

app/Template/project_list/project_icons.php

@@ -10,13 +10,11 @@
     <?php endif ?>
 
     <?php if ($this->user->hasAccess('ProjectUserOverviewController', 'managers')): ?>
-        <span class="tooltip" title="<?= t('Members') ?>" data-href="<?= $this->url->href('ProjectUserOverviewController', 'users', array('project_id' => $project['id'])) ?>"><i class="fa fa-users"></i></span>&nbsp;
+        <?= $this->app->tooltipLink('<i class="fa fa-users"></i>', $this->url->href('ProjectUserOverviewController', 'users', array('project_id' => $project['id']))) ?>
     <?php endif ?>
 
     <?php if (! empty($project['description'])): ?>
-        <span class="tooltip" title="<?= $this->text->markdownAttribute($project['description']) ?>">
+        <?= $this->app->tooltipMarkdown($project['description']) ?>
-            <i class="fa fa-info-circle"></i>
-        </span>
     <?php endif ?>
 
     <?php if ($project['is_active'] == 0): ?>

app/Template/project_overview/images.php

@@ -30,9 +30,7 @@
                         </div>
                     </div>
                     <div class="file-thumbnail-description">
-                    <span class="tooltip" title='<?= t('Uploaded: %s', $this->dt->datetime($file['date'])).'<br>'.t('Size: %s', $this->text->bytes($file['size'])) ?>'>
+                        <?= $this->app->tooltipMarkdown(t('Uploaded: %s', $this->dt->datetime($file['date']))."\n\n".t('Size: %s', $this->text->bytes($file['size']))) ?>
-                        <i class="fa fa-info-circle"></i>
-                    </span>
                         <?php if (! empty($file['user_id'])): ?>
                             <?= t('Uploaded by %s', $file['user_name'] ?: $file['username']) ?>
                         <?php else: ?>

app/Template/project_predefined_content/show.php

@@ -25,9 +25,7 @@
                     </ul>
                 </div>
                 <?= $this->text->e($template['title']) ?>
-                <span class="tooltip" title="<?= $this->text->markdownAttribute($template['description']) ?>">
+                <?= $this->app->tooltipMarkdown($template['description']) ?>
-                    <i class="fa fa-info-circle"></i>
-                </span>
             </td>
         </tr>
         <?php endforeach ?>

app/Template/project_view/show.php

@@ -65,9 +65,7 @@
                 <td>
                     <?= $this->text->e($column['title']) ?>
                     <?php if (! empty($column['description'])): ?>
-                        <span class="tooltip" title="<?= $this->text->markdownAttribute($column['description']) ?>">
+                        <?= $this->app->tooltipMarkdown($column['description']) ?>
-                        <i class="fa fa-info-circle"></i>
-                    </span>
                     <?php endif ?>
                 </td>
                 <td>

app/Template/swimlane/table.php

@@ -40,9 +40,7 @@
                 <?= $this->text->e($swimlane['name']) ?>
 
                 <?php if (! empty($swimlane['description'])): ?>
-                    <span class="tooltip" title="<?= $this->text->markdownAttribute($swimlane['description']) ?>">
+                    <?= $this->app->tooltipMarkdown($swimlane['description']) ?>
-                        <i class="fa fa-info-circle"></i>
-                    </span>
                 <?php endif ?>
             </td>
             <td>

app/Template/task_file/images.php

@@ -30,9 +30,7 @@
                         </div>
                     </div>
                     <div class="file-thumbnail-description">
-                            <span class="tooltip" title='<?= t('Uploaded: %s', $this->dt->datetime($file['date'])).'<br>'.t('Size: %s', $this->text->bytes($file['size'])) ?>'>
+                        <?= $this->app->tooltipMarkdown(t('Uploaded: %s', $this->dt->datetime($file['date']))."\n\n".t('Size: %s', $this->text->bytes($file['size']))) ?>
-                                <i class="fa fa-info-circle"></i>
-                            </span>
                         <?php if (! empty($file['user_id'])): ?>
                             <?= t('Uploaded by %s', $file['user_name'] ?: $file['username']) ?>
                         <?php else: ?>

app/Template/task_list/task_details.php

@@ -13,8 +13,11 @@
                     array('task_id' => $task['id'], 'project_id' => $task['project_id']),
                     false,
                     'js-modal-medium' . (! empty($task['category_description']) ? ' tooltip' : ''),
-                    ! empty($task['category_description']) ? $this->text->markdownAttribute($task['category_description']) : t('Change category')
+                    t('Change category')
                 ) ?>
+                <?php if (! empty($task['category_description'])): ?>
+                    <?= $this->app->tooltipMarkdown($task['category_description']) ?>
+                <?php endif ?>
             <?php else: ?>
                 <?= $this->text->e($task['category_name']) ?>
             <?php endif ?>

app/Template/task_list/task_icons.php

@@ -44,27 +44,27 @@
     <?php endif ?>
 
     <?php if ($task['recurrence_status'] == \Kanboard\Model\TaskModel::RECURRING_STATUS_PENDING): ?>
-        <span title="<?= t('Recurrence') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'recurrence', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-refresh fa-rotate-90"></i></span>
+        <?= $this->app->tooltipLink('<i class="fa fa-refresh fa-rotate-90"></i>', $this->url->href('BoardTooltipController', 'recurrence', array('task_id' => $task['id'], 'project_id' => $task['project_id']))) ?>
     <?php endif ?>
 
     <?php if ($task['recurrence_status'] == \Kanboard\Model\TaskModel::RECURRING_STATUS_PROCESSED): ?>
-        <span title="<?= t('Recurrence') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'recurrence', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-refresh fa-rotate-90 fa-inverse"></i></span>
+        <?= $this->app->tooltipLink('<i class="fa fa-refresh fa-rotate-90 fa-inverse"></i>', $this->url->href('BoardTooltipController', 'recurrence', array('task_id' => $task['id'], 'project_id' => $task['project_id']))) ?>
     <?php endif ?>
 
     <?php if (! empty($task['nb_links'])): ?>
-        <span title="<?= t('Links') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'tasklinks', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-code-fork fa-fw"></i><?= $task['nb_links'] ?></span>
+        <?= $this->app->tooltipLink('<i class="fa fa-code-fork fa-fw"></i>'.$task['nb_links'], $this->url->href('BoardTooltipController', 'tasklinks', array('task_id' => $task['id'], 'project_id' => $task['project_id']))) ?>
     <?php endif ?>
 
     <?php if (! empty($task['nb_external_links'])): ?>
-        <span title="<?= t('External links') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'externallinks', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-external-link fa-fw"></i><?= $task['nb_external_links'] ?></span>
+        <?= $this->app->tooltipLink('<i class="fa fa-external-link fa-fw"></i>'.$task['nb_external_links'], $this->url->href('BoardTooltipController', 'externallinks', array('task_id' => $task['id'], 'project_id' => $task['project_id']))) ?>
     <?php endif ?>
 
     <?php if (! empty($task['nb_subtasks'])): ?>
-        <span title="<?= t('Sub-Tasks') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'subtasks', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-bars"></i>&nbsp;<?= round($task['nb_completed_subtasks']/$task['nb_subtasks']*100, 0).'%' ?></span>
+        <?= $this->app->tooltipLink('<i class="fa fa-bars fa-fw"></i>'.round($task['nb_completed_subtasks'] / $task['nb_subtasks'] * 100, 0).'%', $this->url->href('BoardTooltipController', 'subtasks', array('task_id' => $task['id'], 'project_id' => $task['project_id']))) ?>
     <?php endif ?>
 
     <?php if (! empty($task['nb_files'])): ?>
-        <span title="<?= t('Attachments') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'attachments', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>"><i class="fa fa-paperclip"></i>&nbsp;<?= $task['nb_files'] ?></span>
+        <?= $this->app->tooltipLink('<i class="fa fa-paperclip fa-fw"></i>'.$task['nb_files'], $this->url->href('BoardTooltipController', 'attachments', array('task_id' => $task['id'], 'project_id' => $task['project_id']))) ?>
     <?php endif ?>
 
     <?php if ($task['nb_comments'] > 0): ?>
@@ -83,9 +83,7 @@
     <?php endif ?>
 
     <?php if (! empty($task['description'])): ?>
-        <span title="<?= t('Description') ?>" class="tooltip" data-href="<?= $this->url->href('BoardTooltipController', 'description', array('task_id' => $task['id'], 'project_id' => $task['project_id'])) ?>">
+        <?= $this->app->tooltipLink('<i class="fa fa-file-text-o"></i>', $this->url->href('BoardTooltipController', 'description', array('task_id' => $task['id'], 'project_id' => $task['project_id']))) ?>
-            <i class="fa fa-file-text-o"></i>
-        </span>
     <?php endif ?>
 
     <span title="<?= t('Position') ?>">(<?= $task['position'] ?>)</span>

assets/js/core/bootstrap.js

@@ -3,5 +3,6 @@ document.addEventListener('DOMContentLoaded', function () {
     KB.render();
     KB.listen();
     KB.keyboardShortcuts();
+    KB.tooltip();
     KB.trigger('dom.ready');
 });

assets/js/core/tooltip.js

@@ -0,0 +1,85 @@
+KB.tooltip = function () {
+    function onMouseOver(event) {
+        if (! exists()) {
+            create(event.target);
+        }
+    }
+
+    function onMouseLeaveContainer() {
+        setTimeout(destroy, 500);
+    }
+
+    function create(element) {
+        var contentElement = element.querySelector("script");
+        if (contentElement) {
+            render(element, contentElement.innerHTML);
+            return;
+        }
+
+        var link = element.dataset.href;
+        if (link) {
+            fetch(link, function (html) {
+                if (html) {
+                    render(element, html);
+                }
+            });
+        }
+    }
+
+    function fetch(url, callback) {
+        var request = new XMLHttpRequest();
+        request.open("GET", url, true);
+        request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
+        request.onreadystatechange = function () {
+            if (request.readyState === XMLHttpRequest.DONE) {
+                if (request.status === 200) {
+                    callback(request.responseText);
+                }
+            }
+        };
+        request.send(null);
+    }
+
+    function render(element, html) {        
+        var containerElement = document.createElement("div");
+        containerElement.id = "tooltip-container";
+        containerElement.innerHTML = html;
+        containerElement.addEventListener("mouseleave", onMouseLeaveContainer, false);
+
+        var elementRect = element.getBoundingClientRect();
+        var top = elementRect.top + window.scrollY + elementRect.height;
+        containerElement.style.top = top + "px";
+
+        if (elementRect.left > (window.innerWidth - 600)) {
+            var right = window.innerWidth - elementRect.right - window.scrollX;
+            containerElement.style.right = right + "px";
+        } else {
+            var left = elementRect.left + window.scrollX;
+            containerElement.style.left = left + "px";
+        }
+
+        document.body.appendChild(containerElement);
+
+        document.body.onclick = function(event) {
+            if (! containerElement.contains(event.target)) {
+                destroy();
+            }
+        };
+    }
+
+    function destroy() {
+        var element = document.getElementById("tooltip-container");
+        if (element) {
+            element.parentNode.removeChild(element);
+        }
+    }
+
+    function exists() {
+        return !!document.getElementById("tooltip-container");
+    }
+
+    var elements = document.querySelectorAll(".tooltip");
+    for (var i = 0; i < elements.length; i++) {
+        elements[i].addEventListener("mouseenter", onMouseOver, false);
+    }
+};

assets/js/src/BoardDragAndDrop.js

@@ -103,6 +103,7 @@ Kanboard.BoardDragAndDrop.prototype.refresh = function(data) {
     this.app.hideLoadingIcon();
     this.executeListeners();
     this.dragAndDrop();
+    KB.tooltip();
 };
 
 Kanboard.BoardDragAndDrop.prototype.executeListeners = function() {

assets/js/src/Tooltip.js

@@ -1,75 +0,0 @@
-Kanboard.Tooltip = function(app) {
-    this.app = app;
-};
-
-Kanboard.Tooltip.prototype.onBoardRendered = function() {
-    this.execute();
-};
-
-Kanboard.Tooltip.prototype.execute = function() {
-    $(".tooltip").tooltip({
-        track: false,
-        show: false,
-        hide: false,
-        position: {
-            my: 'left-20 top',
-            at: 'center bottom+9',
-            using: function(position, feedback) {
-
-                $(this).css(position);
-
-                var arrow_pos = feedback.target.left + feedback.target.width / 2 - feedback.element.left - 20;
-
-                $("<div>")
-                    .addClass("tooltip-arrow")
-                    .addClass(feedback.vertical)
-                    .addClass(arrow_pos < 1 ? "align-left" : "align-right")
-                    .appendTo(this);
-            }
-        },
-        content: function() {
-            var _this = this;
-            var href = $(this).attr('data-href');
-
-            if (! href) {
-                return '<div class="markdown">' + $(this).attr("title") + '</div>';
-            }
-
-            $.get(href, function setTooltipContent(data) {
-                var tooltip = $('.ui-tooltip:visible');
-
-                $('.ui-tooltip-content:visible').html(data);
-
-                // Clear previous position, it interferes with the updated position computation
-                tooltip.css({ top: '', left: '' });
-
-                // Remove arrow, it will be added when repositionning
-                tooltip.children('.tooltip-arrow').remove();
-
-                // Reposition the tooltip
-                var position = $(_this).tooltip("option", "position");
-                position.of = $(_this);
-                tooltip.position(position);
-            });
-
-            return '<i class="fa fa-spinner fa-spin"></i>';
-        }
-    })
-    .on("mouseenter", function() {
-        var _this = this;
-        $(this).tooltip("open");
-
-        $(".ui-tooltip").on("mouseleave", function() {
-            $(_this).tooltip('close');
-        });
-    }).on("mouseleave focusout", function(e) {
-        e.stopImmediatePropagation();
-        var _this = this;
-
-        setTimeout(function() {
-            if (! $(".ui-tooltip:hover").length) {
-                $(_this).tooltip("close");
-            }
-        }, 100);
-    });
-};

assets/sass/_tooltip.sass

@@ -1,49 +1,23 @@
 @import variables
 
-.tooltip-arrow:after
+.tooltip
+  i.fa
+    cursor: pointer
+
+  .fa-info-circle
+    color: color('light')
+
+#tooltip-container
+  padding: 5px
   background: #fff
-  border: 1px solid #aaaaaa
+  border: 1px solid #ddd
-  box-shadow: 0 0 5px #aaa
+  border-radius: 4px
-
+  box-shadow: 0 6px 12px #aaa
-div.ui-tooltip
-  min-width: 200px
-  max-width: 600px
-
-.tooltip-arrow
-  width: 20px
-  height: 10px
-  overflow: hidden
   position: absolute
-  &.top
+  min-width: 350px
-    top: -10px
-  &.bottom
-    bottom: -10px
-  &.align-left
-    left: 10px
-  &.align-right
-    right: 10px
-  &:after
-    content: ""
-    position: absolute
-    width: 14px
-    height: 14px
-    -webkit-transform: rotate(45deg)
-    -ms-transform: rotate(45deg)
-    transform: rotate(45deg)
-  &.bottom:after
-    top: -10px
-  &.top:after
-    bottom: -10px
-  &.align-left:after
-    left: 0
-  &.align-right:after
-    right: 0
 
-.tooltip-large
+  .markdown p
-  width: 600px
+    margin-bottom: 0
 
-.ui-tooltip-content .markdown p
+  .tooltip-large
-  margin-bottom: 0
+    width: 600px
-
-.tooltip .fa-info-circle
-  color: color('light')

tests/units/Helper/TextHelperTest.php

@@ -102,14 +102,6 @@ class TextHelperTest extends Base
         $this->assertEquals('<p>Text @admin @notfound</p>', $textHelper->markdown('Text @admin @notfound', true));
     }
 
-    public function testMarkdownAttribute()
-    {
-        $textHelper = new TextHelper($this->container);
-        $this->assertEquals('&lt;p&gt;&Ccedil;a marche&lt;/p&gt;', $textHelper->markdownAttribute('Ça marche'));
-        $this->assertEquals('&lt;p&gt;Test with &amp;quot;double quotes&amp;quot;&lt;/p&gt;', $textHelper->markdownAttribute('Test with "double quotes"'));
-        $this->assertEquals('&lt;p&gt;Test with &#039;single quotes&#039;&lt;/p&gt;', $textHelper->markdownAttribute("Test with 'single quotes'"));
-    }
-
     public function testFormatBytes()
     {
         $textHelper = new TextHelper($this->container);