Add popover helpers in Editor (#105)

public/locales/en/translation.json

@@ -5,7 +5,13 @@
   "Add another image": "Add another image",
   "Add comment": "Comment",
   "Add image": "Add image",
+  "Add link": "Add link",
+  "Add signature": "Add signature",
+  "Add url": "Add url",
   "Address on Discourse": "Address on Discourse",
+  "Alignment center": "Alignment center",
+  "Alignment left": "Alignment left",
+  "Alignment right": "Alignment right",
   "All": "All",
   "All authors": "All authors",
   "All posts": "All posts",
@@ -18,8 +24,10 @@
   "Autotypograph": "Autotypograph",
   "Back to main page": "Back to main page",
   "Become an author": "Become an author",
+  "Bold": "Bold",
   "Bookmarked": "Saved",
   "Bookmarks": "Bookmarks",
+  "Bullet list": "Bullet list",
   "By alphabet": "By alphabet",
   "By authors": "By authors",
   "By name": "By name",
@@ -85,10 +93,14 @@
   "Go to main page": "Go to main page",
   "Group Chat": "Group Chat",
   "Groups": "Groups",
+  "Header 1": "Header 1",
+  "Header 2": "Header 2",
+  "Header 3": "Header 3",
   "Headers": "Headers",
   "Help": "Помощь",
   "Help to edit": "Help to edit",
   "Here you can customize your profile the way you want.": "Here you can customize your profile the way you want.",
+  "Highlight": "Highlight",
   "Hooray! Welcome!": "Hooray! Welcome!",
   "Horizontal collaborative journalistic platform": "Horizontal collaborative journalism platform",
   "Hotkeys": "Горячие клавиши",
@@ -100,7 +112,9 @@
   "I have no account yet": "I don't have an account yet",
   "I know the password": "I know the password",
   "Image format not supported": "Image format not supported",
+  "Incut": "Incut",
   "Independant magazine with an open horizontal cooperation about culture, science and society": "Independant magazine with an open horizontal cooperation about culture, science and society",
+  "Insert footnote": "Insert footnote",
   "Introduce": "Introduction",
   "Invalid email": "Check if your email is correct",
   "Invalid image URL": "Invalid image URL",
@@ -108,6 +122,7 @@
   "Invite co-authors": "Invite co-authors",
   "Invite to collab": "Invite to Collab",
   "It does not look like url": "It doesn't look like a link",
+  "Italic": "Italic",
   "Join": "Join",
   "Join our maillist": "To receive the best postings, just enter your email",
   "Join the community": "Join the community",
@@ -139,6 +154,7 @@
   "Nothing is here": "There is nothing here",
   "Or continue with social network": "Or continue with social network",
   "Or paste a link to an image": "Or paste a link to an image",
+  "Ordered list": "Ordered list",
   "Our regular contributor": "Our regular contributor",
   "Paragraphs": "Абзацев",
   "Participating": "Participating",
@@ -166,7 +182,9 @@
   "Profile settings": "Profile settings",
   "Publications": "Publications",
   "Publish Settings": "Publish Settings",
+  "Punchline": "Punchline",
   "Quit": "Quit",
+  "Quote": "Quote",
   "Quotes": "Quotes",
   "Reason uknown": "Reason unknown",
   "Recent": "Fresh",
@@ -202,6 +220,7 @@
   "Subscribe who you like to tune your personal feed": "Subscribe to authors you're interested in to customize your personal feed and get instant updates on new posts and discussions",
   "Subscription": "Subscription",
   "Subscriptions": "Subscriptions",
+  "Substrate": "Substrate",
   "Successfully authorized": "Authorization successful",
   "Suggest an idea": "Suggest an idea",
   "Support us": "Help the magazine",
@@ -255,13 +274,18 @@
   "Your name will appear on your profile page and as your signature in publications, comments and responses.": "Your name will appear on your profile page and as your signature in publications, comments and responses",
   "accomplices": "accomplices",
   "actions": "actions",
+  "add link": "add link",
   "all topics": "all topics",
   "author": "author",
   "authors": "authors",
+  "back to menu": "back to menu",
+  "bold": "bold",
   "bookmarks": "bookmarks",
   "cancel": "Cancel",
+  "cancel_low_caps": "cancel",
   "collections": "collections",
   "community": "community",
+  "delimiter": "delimiter",
   "discussion": "discourse",
   "discussions": "discussions",
   "drafts": "drafts",
@@ -270,12 +294,19 @@
   "feed": "feed",
   "follower": "follower",
   "general feed": "general tape",
+  "header 1": "header 1",
+  "header 2": "header 2",
+  "header 3": "header 3",
   "invalid password": "invalid password",
+  "italic": "italic",
+  "marker list": "marker list",
   "my feed": "my ribbon",
   "notifications": "notifications",
+  "number list": "number list",
   "personal data usage and email notifications": "to process personal data and receive email notifications",
   "post": "post",
   "register": "register",
+  "repeat": "repeat",
   "shout": "post",
   "sign up or sign in": "sign up or sign in",
   "slug is used by another user": "Slug is already taken by another user",
@@ -283,19 +314,5 @@
   "topics": "topics",
   "user already exist": "user already exists",
   "view": "view",
-  "zine": "zine",
+  "zine": "zine"
-  "back to menu": "back to menu",
-  "bold": "bold",
-  "italic": "italic",
-  "add link": "add link",
-  "header 1": "header 1",
-  "header 2": "header 2",
-  "header 3": "header 3",
-  "marker list": "marker list",
-  "number list": "number list",
-  "delimiter": "delimiter",
-  "cancel_low_caps": "cancel",
-  "repeat": "repeat",
-  "Add signature": "Add signature",
-  "Substrate": "Substrate"
 }

public/locales/ru/translation.json

@@ -6,8 +6,14 @@
   "Add another image": "Добавить другое изображение",
   "Add comment": "Комментировать",
   "Add image": "Добавить изображение",
+  "Add link": "Добавить ссылку",
+  "Add signature": "Добавить подпись",
   "Add to bookmarks": "Добавить в закладки",
+  "Add url": "Добавить ссылку",
   "Address on Discourse": "Адрес на Дискурсе",
+  "Alignment center": "По центру",
+  "Alignment left": "По левому краю",
+  "Alignment right": "По правому краю",
   "All": "Все",
   "All authors": "Все авторы",
   "All posts": "Все публикации",
@@ -20,8 +26,10 @@
   "Autotypograph": "Автотипограф",
   "Back to main page": "Вернуться на главную",
   "Become an author": "Стать автором",
+  "Bold": "Жирный",
   "Bookmarked": "Сохранено",
   "Bookmarks": "Закладки",
+  "Bullet list": "Маркированный список",
   "By alphabet": "По алфавиту",
   "By authors": "По авторам",
   "By name": "По имени",
@@ -90,10 +98,14 @@
   "Group Chat": "Общий чат",
   "Groups": "Группы",
   "Header": "Заголовок",
+  "Header 1": "Заголовок 1",
+  "Header 2": "Заголовок 2",
+  "Header 3": "Заголовок 3",
   "Headers": "Заголовки",
   "Help": "Помощь",
   "Help to edit": "Помочь редактировать",
   "Here you can customize your profile the way you want.": "Здесь можно настроить свой профиль так, как вы хотите.",
+  "Highlight": "Подсветка",
   "Hooray! Welcome!": "Ура! Добро пожаловать!",
   "Horizontal collaborative journalistic platform": "Горизонтальная платформа для коллаборативной журналистики",
   "Hotkeys": "Горячие клавиши",
@@ -105,7 +117,9 @@
   "I have no account yet": "У меня еще нет аккаунта",
   "I know the password": "Я знаю пароль!",
   "Image format not supported": "Тип изображения не поддерживается",
+  "Incut": "Подверстка",
   "Independant magazine with an open horizontal cooperation about culture, science and society": "Независимый журнал с открытой горизонтальной редакцией о культуре, науке и обществе",
+  "Insert footnote": "Вставить сноску",
   "Introduce": "Представление",
   "Invalid email": "Проверьте правильность ввода почты",
   "Invalid image URL": "Некорректная ссылка на изображение",
@@ -114,6 +128,7 @@
   "Invite experts": "Пригласить экспертов",
   "Invite to collab": "Пригласить к участию",
   "It does not look like url": "Это не похоже на ссылку",
+  "Italic": "Курсив",
   "Join": "Присоединиться",
   "Join our maillist": "Чтобы получать рассылку лучших публикаций, просто укажите свою почту",
   "Join the community": "Присоединиться к сообществу",
@@ -146,6 +161,7 @@
   "Nothing is here": "Здесь ничего нет",
   "Or continue with social network": "Или войдите через соцсеть",
   "Or paste a link to an image": "Или вставьте ссылку на изображение",
+  "Ordered list": "Нумерованный список",
   "Our regular contributor": "Наш постоянный автор",
   "Paragraphs": "Абзацев",
   "Participating": "Участвовать",
@@ -177,7 +193,9 @@
   "Publications": "Публикации",
   "Publish": "Опубликовать",
   "Publish Settings": "Настройки публикации",
+  "Punchline": "Панчлайн",
   "Quit": "Выйти",
+  "Quote": "Цитата",
   "Quotes": "Цитаты",
   "Reason uknown": "Причина неизвестна",
   "Recent": "Свежее",
@@ -215,6 +233,7 @@
   "Subscribe who you like to tune your personal feed": "Подпишитесь на интересующих вас авторов, чтобы настроить вашу персональную ленту и моментально узнавать о новых публикациях и обсуждениях",
   "Subscription": "Подписка",
   "Subscriptions": "Подписки",
+  "Substrate": "Подложка",
   "Successfully authorized": "Авторизация успешна",
   "Suggest an idea": "Предложить идею",
   "Support us": "Помочь журналу",
@@ -270,15 +289,20 @@
   "Your name will appear on your profile page and as your signature in publications, comments and responses.": "Ваше имя появится на странице вашего профиля и как ваша подпись в публикациях, комментариях и откликах",
   "accomplices": "соучастники",
   "actions": "действия",
+  "add link": "добавить ссылку",
   "all topics": "все темы",
   "author": "автор",
   "authors": "авторы",
+  "back to menu": "назад в меню",
+  "bold": "жирный",
   "bookmarks": "закладки",
   "cancel": "Отмена",
+  "cancel_low_caps": "отменить",
   "collections": "коллекции",
   "community": "сообщество",
   "create_chat": "Создать чат",
   "create_group": "Создать группу",
+  "delimiter": "разделитель",
   "discourse_theme": "Тема дискурса",
   "discussion": "дискурс",
   "discussions": "дискуссии",
@@ -288,13 +312,20 @@
   "feed": "лента",
   "follower": "подписчик",
   "general feed": "общая лента",
+  "header 1": "заголовок 1",
+  "header 2": "заголовок 2",
+  "header 3": "заголовок 3",
   "invalid password": "некорректный пароль",
+  "italic": "курсив",
+  "marker list": "маркир. список",
   "my feed": "моя лента",
   "notifications": "уведомления",
+  "number list": "нумер. список",
   "or": "или",
   "personal data usage and email notifications": "на обработку персональных данных и на получение почтовых уведомлений",
   "post": "пост",
   "register": "зарегистрируйтесь",
+  "repeat": "повторить",
   "shout": "пост",
   "sign in": "войти",
   "sign up": "зарегистрироваться",
@@ -305,19 +336,5 @@
   "topics": "темы",
   "user already exist": "пользователь уже существует",
   "view": "просмотр",
-  "zine": "журнал",
+  "zine": "журнал"
-  "back to menu": "назад в меню",
-  "bold": "жирный",
-  "italic": "курсив",
-  "add link": "добавить ссылку",
-  "header 1": "заголовок 1",
-  "header 2": "заголовок 2",
-  "header 3": "заголовок 3",
-  "marker list": "маркир. список",
-  "number list": "нумер. список",
-  "delimiter": "разделитель",
-  "cancel_low_caps": "отменить",
-  "repeat": "повторить",
-  "Add signature": "Добавить подпись",
-  "Substrate": "Подложка"
 }

src/components/Editor/BubbleMenu/BlockquoteBubbleMenu.tsx

@@ -1,8 +1,9 @@
 import type { Editor } from '@tiptap/core'
-import styles from './FigureBubbleMenu.module.scss'
+import styles from './BubbleMenu.module.scss'
 import { clsx } from 'clsx'
 import { Icon } from '../../_shared/Icon'
 import { useLocalize } from '../../../context/localize'
+import { Popover } from '../../_shared/Popover'
 
 type Props = {
   editor: Editor
@@ -10,9 +11,13 @@ type Props = {
 }
 
 export const BlockquoteBubbleMenu = (props: Props) => {
+  const { t } = useLocalize()
   return (
-    <div ref={props.ref} class={styles.FigureBubbleMenu}>
+    <div ref={props.ref} class={styles.BubbleMenu}>
+      <Popover content={t('Alignment left')}>
+        {(triggerRef: (el) => void) => (
           <button
+            ref={triggerRef}
             type="button"
             class={clsx(styles.bubbleMenuButton)}
             onClick={() => {
@@ -21,20 +26,32 @@ export const BlockquoteBubbleMenu = (props: Props) => {
           >
             <Icon name="editor-image-align-left" />
           </button>
+        )}
+      </Popover>
+      <Popover content={t('Alignment center')}>
+        {(triggerRef: (el) => void) => (
           <button
+            ref={triggerRef}
             type="button"
             class={clsx(styles.bubbleMenuButton)}
             onClick={() => props.editor.chain().focus().setBlockQuoteFloat(null).run()}
           >
             <Icon name="editor-image-align-center" />
           </button>
+        )}
+      </Popover>
+      <Popover content={t('Alignment center')}>
+        {(triggerRef: (el) => void) => (
           <button
+            ref={triggerRef}
             type="button"
             class={clsx(styles.bubbleMenuButton)}
             onClick={() => props.editor.chain().focus().setBlockQuoteFloat('right').run()}
           >
             <Icon name="editor-image-align-right" />
           </button>
+        )}
+      </Popover>
     </div>
   )
 }

src/components/Editor/BubbleMenu/BubbleMenu.module.scss

@@ -1,4 +1,4 @@
-.FigureBubbleMenu {
+.BubbleMenu {
   background: #000;
   display: flex;
   flex-direction: row;

src/components/Editor/BubbleMenu/FigureBubbleMenu.tsx

@@ -1,8 +1,9 @@
 import type { Editor } from '@tiptap/core'
-import styles from './FigureBubbleMenu.module.scss'
+import styles from './BubbleMenu.module.scss'
 import { clsx } from 'clsx'
 import { Icon } from '../../_shared/Icon'
 import { useLocalize } from '../../../context/localize'
+import { Popover } from '../../_shared/Popover'
 
 type Props = {
   editor: Editor
@@ -12,29 +13,43 @@ type Props = {
 export const FigureBubbleMenu = (props: Props) => {
   const { t } = useLocalize()
   return (
-    <div ref={props.ref} class={styles.FigureBubbleMenu}>
+    <div ref={props.ref} class={styles.BubbleMenu}>
+      <Popover content={t('Alignment left')}>
+        {(triggerRef: (el) => void) => (
           <button
+            ref={triggerRef}
             type="button"
             class={clsx(styles.bubbleMenuButton)}
             onClick={() => props.editor.chain().focus().setImageFloat('left').run()}
           >
             <Icon name="editor-image-align-left" />
           </button>
+        )}
+      </Popover>
+      <Popover content={t('Alignment center')}>
+        {(triggerRef: (el) => void) => (
           <button
+            ref={triggerRef}
             type="button"
             class={clsx(styles.bubbleMenuButton)}
             onClick={() => props.editor.chain().focus().setImageFloat(null).run()}
           >
             <Icon name="editor-image-align-center" />
           </button>
+        )}
+      </Popover>
+      <Popover content={t('Alignment right')}>
+        {(triggerRef: (el) => void) => (
           <button
+            ref={triggerRef}
             type="button"
             class={clsx(styles.bubbleMenuButton)}
             onClick={() => props.editor.chain().focus().setImageFloat('right').run()}
           >
             <Icon name="editor-image-align-right" />
           </button>
-
+        )}
+      </Popover>
       <div class={styles.delimiter} />
       <button
         type="button"
@@ -46,9 +61,13 @@ export const FigureBubbleMenu = (props: Props) => {
         <span style={{ color: 'white' }}>{t('Add signature')}</span>
       </button>
       <div class={styles.delimiter} />
-      <button type="button" class={clsx(styles.bubbleMenuButton)}>
+      <Popover content={t('Add image')}>
+        {(triggerRef: (el) => void) => (
+          <button type="button" ref={triggerRef} class={clsx(styles.bubbleMenuButton)}>
             <Icon name="editor-image-add" />
           </button>
+        )}
+      </Popover>
     </div>
   )
 }

src/components/Editor/BubbleMenu/IncutBubbleMenu.tsx

@@ -1,6 +1,6 @@
 import { createSignal, Show, For } from 'solid-js'
 import type { Editor } from '@tiptap/core'
-import styles from './FigureBubbleMenu.module.scss'
+import styles from './BubbleMenu.module.scss'
 import { clsx } from 'clsx'
 import { Icon } from '../../_shared/Icon'
 import { useLocalize } from '../../../context/localize'
@@ -16,7 +16,7 @@ export const IncutBubbleMenu = (props: Props) => {
   const { t } = useLocalize()
   const [substratBubbleOpen, setSubstratBubbleOpen] = createSignal(false)
   return (
-    <div ref={props.ref} class={styles.FigureBubbleMenu}>
+    <div ref={props.ref} class={styles.BubbleMenu}>
       <button
         type="button"
         class={clsx(styles.bubbleMenuButton)}

src/components/Editor/Editor.tsx

@@ -177,28 +177,25 @@ export const Editor = (props: EditorProps) => {
           const isEmptyTextBlock = doc.textBetween(from, to).length === 0 && isTextSelection(selection)
 
           setIsCommonMarkup(e.isActive('figure'))
-          return (
+          return view.hasFocus() && !empty && !isEmptyTextBlock && !e.isActive('image')
-            view.hasFocus() &&
-            !empty &&
-            !isEmptyTextBlock &&
-            !e.isActive('image') &&
-            !e.isActive('blockquote') &&
-            !e.isActive('article')
-          )
         }
       }),
       BubbleMenu.configure({
         pluginKey: 'blockquoteBubbleMenu',
         element: blockquoteBubbleMenuRef.current,
-        shouldShow: ({ editor: e, view }) => {
+        shouldShow: ({ editor: e, state }) => {
-          return view.hasFocus() && e.isActive('blockquote')
+          const { selection } = state
+          const { empty } = selection
+          return empty && e.isActive('blockquote')
         }
       }),
       BubbleMenu.configure({
         pluginKey: 'incutBubbleMenu',
         element: incutBubbleMenuRef.current,
-        shouldShow: ({ editor: e, view }) => {
+        shouldShow: ({ editor: e, state }) => {
-          return view.hasFocus() && e.isActive('article')
+          const { selection } = state
+          const { empty } = selection
+          return empty && e.isActive('article')
         }
       }),
       BubbleMenu.configure({

src/components/Editor/InlineForm/InlineForm.tsx

@@ -2,6 +2,8 @@ import styles from './InlineForm.module.scss'
 import { Icon } from '../../_shared/Icon'
 import { createSignal } from 'solid-js'
 import { clsx } from 'clsx'
+import { Popover } from '../../_shared/Popover'
+import { useLocalize } from '../../../context/localize'
 
 type Props = {
   onClose: () => void
@@ -15,6 +17,7 @@ type Props = {
 }
 
 export const InlineForm = (props: Props) => {
+  const { t } = useLocalize()
   const [formValue, setFormValue] = createSignal(props.initialValue || '')
   const [formValueError, setFormValueError] = createSignal<string | undefined>()
 
@@ -61,12 +64,25 @@ export const InlineForm = (props: Props) => {
           onKeyDown={handleKeyDown}
           onInput={handleFormInput}
         />
-        <button type="button" onClick={handleSaveButtonClick} disabled={Boolean(formValueError())}>
+        <Popover content={t('Add link')}>
+          {(triggerRef: (el) => void) => (
+            <button
+              ref={triggerRef}
+              type="button"
+              onClick={handleSaveButtonClick}
+              disabled={Boolean(formValueError())}
+            >
               <Icon name="status-done" />
             </button>
-        <button type="button" onClick={props.onClear}>
+          )}
+        </Popover>
+        <Popover content={props.initialValue ? t('Unlink') : t('Cancel')}>
+          {(triggerRef: (el) => void) => (
+            <button ref={triggerRef} type="button" onClick={props.onClear}>
               {props.initialValue ? <Icon name="editor-unlink" /> : <Icon name="status-cancel" />}
             </button>
+          )}
+        </Popover>
       </div>
 
       <div class={clsx(styles.linkError, { [styles.visible]: Boolean(formValueError()) })}>

src/components/Editor/TextBubbleMenu/TextBubbleMenu.tsx

@@ -7,6 +7,7 @@ import { createEditorTransaction } from 'solid-tiptap'
 import { useLocalize } from '../../../context/localize'
 import { InlineForm } from '../InlineForm'
 import { validateUrl } from '../../../utils/validateUrl'
+import { Popover } from '../../_shared/Popover'
 
 type BubbleMenuProps = {
   editor: Editor
@@ -107,7 +108,10 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                     <div class={styles.dropDown}>
                       <header>{t('Headers')}</header>
                       <div class={styles.actions}>
+                        <Popover content={t('Header 1')}>
+                          {(triggerRef: (el) => void) => (
                             <button
+                              ref={triggerRef}
                               type="button"
                               class={clsx(styles.bubbleMenuButton, {
                                 [styles.bubbleMenuButtonActive]: isH1()
@@ -119,7 +123,12 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                             >
                               <Icon name="editor-h1" />
                             </button>
+                          )}
+                        </Popover>
+                        <Popover content={t('Header 2')}>
+                          {(triggerRef: (el) => void) => (
                             <button
+                              ref={triggerRef}
                               type="button"
                               class={clsx(styles.bubbleMenuButton, {
                                 [styles.bubbleMenuButtonActive]: isH2()
@@ -131,7 +140,12 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                             >
                               <Icon name="editor-h2" />
                             </button>
+                          )}
+                        </Popover>
+                        <Popover content={t('Header 3')}>
+                          {(triggerRef: (el) => void) => (
                             <button
+                              ref={triggerRef}
                               type="button"
                               class={clsx(styles.bubbleMenuButton, {
                                 [styles.bubbleMenuButtonActive]: isH3()
@@ -143,10 +157,15 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                             >
                               <Icon name="editor-h3" />
                             </button>
+                          )}
+                        </Popover>
                       </div>
                       <header>{t('Quotes')}</header>
                       <div class={styles.actions}>
+                        <Popover content={t('Quote')}>
+                          {(triggerRef: (el) => void) => (
                             <button
+                              ref={triggerRef}
                               type="button"
                               class={clsx(styles.bubbleMenuButton, {
                                 [styles.bubbleMenuButtonActive]: isBlockQuote()
@@ -158,7 +177,12 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                             >
                               <Icon name="editor-blockquote" />
                             </button>
+                          )}
+                        </Popover>
+                        <Popover content={t('Punchline')}>
+                          {(triggerRef: (el) => void) => (
                             <button
+                              ref={triggerRef}
                               type="button"
                               class={clsx(styles.bubbleMenuButton, {
                                 [styles.bubbleMenuButtonActive]: isBlockQuote()
@@ -170,10 +194,15 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                             >
                               <Icon name="editor-quote" />
                             </button>
+                          )}
+                        </Popover>
                       </div>
                       <header>{t('squib')}</header>
                       <div class={styles.actions}>
+                        <Popover content={t('Incut')}>
+                          {(triggerRef: (el) => void) => (
                             <button
+                              ref={triggerRef}
                               type="button"
                               class={clsx(styles.bubbleMenuButton, {
                                 [styles.bubbleMenuButtonActive]: isBlockQuote()
@@ -185,6 +214,8 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                             >
                               <Icon name="editor-squib" />
                             </button>
+                          )}
+                        </Popover>
                       </div>
                     </div>
                   </Show>
@@ -192,7 +223,10 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                 <div class={styles.delimiter} />
               </>
             </Show>
+            <Popover content={t('Bold')}>
+              {(triggerRef: (el) => void) => (
                 <button
+                  ref={triggerRef}
                   type="button"
                   class={clsx(styles.bubbleMenuButton, {
                     [styles.bubbleMenuButtonActive]: isBold()
@@ -201,7 +235,12 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                 >
                   <Icon name="editor-bold" />
                 </button>
+              )}
+            </Popover>
+            <Popover content={t('Italic')}>
+              {(triggerRef: (el) => void) => (
                 <button
+                  ref={triggerRef}
                   type="button"
                   class={clsx(styles.bubbleMenuButton, {
                     [styles.bubbleMenuButtonActive]: isItalic()
@@ -210,9 +249,14 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                 >
                   <Icon name="editor-italic" />
                 </button>
+              )}
+            </Popover>
 
             <Show when={!props.isCommonMarkup}>
+              <Popover content={t('Highlight')}>
+                {(triggerRef: (el) => void) => (
                   <button
+                    ref={triggerRef}
                     type="button"
                     class={clsx(styles.bubbleMenuButton, {
                       [styles.bubbleMenuButtonActive]: isHighlight()
@@ -221,9 +265,14 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                   >
                     <div class={styles.toggleHighlight} />
                   </button>
+                )}
+              </Popover>
             </Show>
             <div class={styles.delimiter} />
+            <Popover content={t('Add url')}>
+              {(triggerRef: (el) => void) => (
                 <button
+                  ref={triggerRef}
                   type="button"
                   onClick={toggleLinkForm}
                   class={clsx(styles.bubbleMenuButton, {
@@ -232,11 +281,17 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                 >
                   <Icon name="editor-link" />
                 </button>
+              )}
+            </Popover>
             <Show when={!props.isCommonMarkup}>
               <>
-                <button type="button" class={styles.bubbleMenuButton}>
+                <Popover content={t('Insert footnote')}>
+                  {(triggerRef: (el) => void) => (
+                    <button ref={triggerRef} type="button" class={styles.bubbleMenuButton}>
                       <Icon name="editor-footnote" />
                     </button>
+                  )}
+                </Popover>
                 <div class={styles.delimiter} />
                 <div class={styles.dropDownHolder}>
                   <button
@@ -253,7 +308,10 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                     <div class={styles.dropDown}>
                       <header>{t('Lists')}</header>
                       <div class={styles.actions}>
+                        <Popover content={t('Bullet list')}>
+                          {(triggerRef: (el) => void) => (
                             <button
+                              ref={triggerRef}
                               type="button"
                               class={clsx(styles.bubbleMenuButton, {
                                 [styles.bubbleMenuButtonActive]: isBulletList()
@@ -265,7 +323,12 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                             >
                               <Icon name="editor-ul" />
                             </button>
+                          )}
+                        </Popover>
+                        <Popover content={t('Ordered list')}>
+                          {(triggerRef: (el) => void) => (
                             <button
+                              ref={triggerRef}
                               type="button"
                               class={clsx(styles.bubbleMenuButton, {
                                 [styles.bubbleMenuButtonActive]: isOrderedList()
@@ -277,6 +340,8 @@ export const TextBubbleMenu = (props: BubbleMenuProps) => {
                             >
                               <Icon name="editor-ol" />
                             </button>
+                          )}
+                        </Popover>
                       </div>
                     </div>
                   </Show>