stats: Show tooltips using tippyjs.

We don't want to import tippyjs module here
along with its dependencies, so we just copied
over tippyjs defaults here. They should be
work fine for /stats page even if we decide to change
defaults for the app in tippyjs and forget to do
it here.
This commit is contained in:
Aman Agrawal 2021-02-25 02:03:52 +00:00 committed by Tim Abbott
parent a3e36ac830
commit 2e2ff568ba
2 changed files with 7 additions and 10 deletions

View File

@ -2,6 +2,7 @@ import $ from "jquery";
import PlotlyBar from "plotly.js/lib/bar";
import Plotly from "plotly.js/lib/core";
import PlotlyPie from "plotly.js/lib/pie";
import tippy from "tippy.js";
import {i18n} from "../i18n";
import {page_params} from "../page_params";
@ -86,18 +87,14 @@ function update_last_full_update(end_times) {
}
$(() => {
$('span[data-toggle="tooltip"]').tooltip({
tippy(".last_update_tooltip", {
// Same defaults as set in our tippyjs module.
maxWidth: 300,
delay: [100, 20],
animation: false,
touch: ["hold", 750],
placement: "top",
trigger: "manual",
});
$("#id_last_update_question_sign")
.on("mouseenter", () => {
$("span.last_update_tooltip").tooltip("show");
})
.on("mouseleave", () => {
$("span.last_update_tooltip").tooltip("hide");
});
// Add configuration for any additional tooltips here.
});

View File

@ -122,7 +122,7 @@
<div class="last-update">
{{ _("Last update") }}: <span id="id_last_full_update"></span>
<span data-toggle="tooltip" class="last_update_tooltip" data-html="true" title="{% trans %}A full update of all the graphs happens once a day.<br/>The “messages sent over time” graph is updated once an hour.{% endtrans %}">
<span class="last_update_tooltip" data-tippy-content="{% trans %}A full update of all the graphs happens once a day. The “messages sent over time” graph is updated once an hour.{% endtrans %}">
<span class="fa fa-info-circle" id="id_last_update_question_sign"></span>
</span>
<br>