Quill tooltip, how to make your own. Example on links
How quill tooltip works, introduction
It's time to tell you how to make your own tooltip. And first, let's find out how the tooltip from quill works.
All Quill tooltips are inherited from the common BaseTooltip class. What should concern me, and you in particular, are the following lines of code:
I don't like them very much. Why? I just don't see a way to organically add a new tooltip or extend the old one. I myself have been tormented for a long time and wondered how I could extend an existing class. But the only way I came to was to inherit not from BaseTooltip but from Tooltip class.
Another option is to create your own theme. After all, the Quill tooltip is not a module (which would actually be more logical, in my opinion), but a part of the theme. And there are two themes: snow and bubble. But again, for me, this is too much work, just to show one extra window on the screen.
Honestly, my solution to the problem is not elegant at all. But it works ¯\_(ツ)_/¯. And I'm going to show it to you anyway ;)
Developing a custom quill tooltip
As you already know (and if you don't, you can find out (☞゚ヮ゚)☞), my html editor has three types of links: internal, external and downloadable. External leads to other pages. Internal leads to other parts of the same page. Downloadable, well ... these are just links to files that can be downloaded ???
Let's create new blots using inline format. Please note, I do not inherit from 'formats/link' !!! The thing is, this format has a default tooltip attached to it, and I do not need the extra fuss created by this tooltip.
Instead, I created custom blots and registered new formatters for them. I also added click handlers for links. They cause the creation, or rather, the appearance of the tooltip.
A little more about position and height. I use CSS styles to control the position on the screen. In case you wish to see this style, here they are:
I set the height because I wanted it to overlap the "sticky" footer. You do not have to do this.
Now we can move on to the tooltip itself. What does it consist of, what are its features, etc. I created my tooltip by analogy with BaseTooltip. Therefore, many methods are purely for internal use. Here it is:
The constructor defines the shape, height, and structure of the tooltip. I want to note that the original tooltip (from quill) defines its structure using a static member of the class called TEMPLATE , which is located in https://github.com/slab/quill/blob/main/packages/quill/src/themes/snow.ts. I decided that I needed a more modular system. (Yes, by modular system I meant those 3 pathetic functions for creating buttons ¯\(°_o)/¯) Here they are:
- insertRemoveBtn
- insertAddBtn
- insertTextInput
The save and remove functions were also redefined. This is how my tooltips work in the editor. Not pretty, not elegant, but they work. I hope this example was useful to you and you learned at least something from it.
0
Related questions
- How does prop children work? Some components do not know their children in advance. This is especially true for components like Sidebar or Dialog, which are like a "box" into which you can put something. For such components, we recommend using a special prop children, which will pass the child elements directly to the output
- When should I use inline-style vs. CSS? Use inline-styles for dynamic style properties. The CSS alternative provides more advantages, such as auto-prefixing, better debugging, media queries, keyframes.
- What is the best way to combine fonts? Overloading the website with different fonts is never a good idea, but it doesn’t hurt to combine just a few simple fonts on each page. The general rule is to incorporate two fonts that look quite similar with one noticeable distinction.