mirror of
https://github.com/zulip/zulip.git
synced 2025-11-04 22:13:26 +00:00
9c6f5d5946
Our aim is to use this library to remove use of bootstrap-tooltip for showing popovers and tooltips. This will remove our dependency on bootstrap for showing tooltips. Thus, bootstrap can be upgrade more independently.
41 lines
1.1 KiB
JavaScript
41 lines
1.1 KiB
JavaScript
import tippy, {delegate} from "tippy.js";
|
|
|
|
// We override the defaults set by tippy library here,
|
|
// so make sure to check this too after checking tippyjs
|
|
// documentation for default properties.
|
|
tippy.setDefaultProps({
|
|
// We don't want tooltips
|
|
// to take more space than
|
|
// mobile widths ever.
|
|
maxWidth: 300,
|
|
|
|
// Some delay to showing / hiding the tooltip makes
|
|
// it look less forced and more natural.
|
|
delay: [100, 20],
|
|
placement: "auto",
|
|
|
|
// disable animations to make the
|
|
// tooltips feel snappy
|
|
animation: false,
|
|
|
|
// Show tooltips on long press on touch based
|
|
// devices.
|
|
touch: ["hold", 750],
|
|
|
|
// html content is not supported by default
|
|
// enable it by passing data-tippy-allowHtml="true"
|
|
// in the tag or a parameter.
|
|
});
|
|
|
|
export function initialize() {
|
|
delegate("body", {
|
|
// Add elements here which are not displayed on
|
|
// initial load but are displayed later through
|
|
// some means.
|
|
//
|
|
// Make all html elements having this class
|
|
// show tippy styled tooltip on hover.
|
|
target: ".tippy-zulip-tooltip",
|
|
});
|
|
}
|