Tooltips

Overview Design Languages Menus Snippets Tooltips

TOOLTIPS

Introduction

Tooltips are small pop-ups that appear when you click some chosen trigger (a word or words or image, also called the keyword), to bring up a small screen with text and images (tooltip content) that provides extra information without leaving the page. The trigger has a dotted underline like this one. A tooltip can be made auto-inserted (pop up wherever the trigger appears on the site) or manually inserted (pop up only at a specific spot on a page). For example, we arrange that if we click on the word “minchi” anywhere on the site, its tooltip will appear auto-inserted. On the other hand, when we click on a footnote like “(1)” we only want it to apply in that spot on that page. Read about click and hover.

Unique and Non-unique Triggers

Triggers can be unique (nothing else on the site matches them) or non-unique; tooltips for each are handled differently. Click to see examples:
  • Tooltip with a unique trigger Júlia Maria Belarmina Alves de Vasconcelos Soares (Unique because one else has exactly this name.)
  • Another example of a unique trigger minchi (Unique because no other word contains minchi.)
  • Tooltip with a non-unique trigger Julia
Tooltips with unique triggers can be inserted either automatically or manually; tooltips with non-unique triggers can only be inserted manually. See explanation below.

Automatic insertion

If we want the tooltip to be inserted automatically wherever the trigger appears, we add it to the wpTooltips Plugin Tooltip List.

Read about its limitations

  • Click on WordPress Dashboard > Tooltips > Add New Tooltip
  • Add the Title (Example: Júlia Maria Belarmina Alves de Vasconcelos Soares)
  • Fill in the Tooltip Content with text or images.
  • Do not add anything to the Synonyms field. Read explanation
  • Items in the Tooltips List will then be inserted automatically wherever the trigger appears on the website.

    • Manual insertion

    Tooltips can be inserted manually using shortcodes as follows: Navigate to the place where you want to insert the tooltip and, from Elementor Editor> Content >Code, enter this shortcode. 
    [tooltips content="TOOLTIP CONTENT"]TRIGGER[/tooltips]
    or this one: 
    [tt keyword="TRIGGER"]TOOLTIP CONTENT[/tt]
    which is preferred because it allows inverted commas within the tooltip content itself.

    Example: [tt keyword=”João”]His nickname was “Jack”.[/tt]

    This avoids the problem of nested quotation marks, which are not permitted in standard HTML attributes and can lead to errors. Click to see the coding for this shortcode. Other coding for tooltips

    Re-using entries in the Tooltips List

    Here we make use of tooltip content that had been created for a unique trigger but we want that content to pop up in a specific place with a trigger that is not unique. For example, we have created a tooltip for the unique trigger Júlia Maria Belarmina Alves de Vasconcelos Soares but in a particular page we want the tooltip content to appear when we click on a non-unique trigger like my mother. In these circumstances, we can re-use the Tooltip List entry, using the following procedure:
    • Open All Tooltips and navigate to the tooltip.
    • Note the number in the URL (in the example, it is 45583; this is the Tooltip ID).
    • Navigate to the spot where you want the tooltip to appear and enter this shortcode with this Tooltip ID
      (in Elementor Edit > Content > Code):
    • In the example, this would be

      This method is particularly useful if the tooltip content is large.

      Do not confuse the person ID with the tooltip ID; in the example, Julia Soares’ person ID is 17450 but the tooltip using her name as trigger has the tooltip ID 45583.

    wpTooltips plugin

    wpTooltips Pro is a very powerful and flexible plugin but has serious limitations that can lead to catastrophic website failure. It is convenient but should be used sparingly, especially for auto-insert.

    • Carriage returns should be inserted in tooltip content only using HTML markup such as <br> or <p>…</p> or <div> … </div>, never by pressing Enter.   Read explanation
    • The keyword (also called trigger) must be unique; serious problems can arise if keywords are duplicated or are similar (like Júlia Belarmina Soares and Julia Belarmina Soares).
    • Make sure that your keyword can never appear as part of some other word (for example, keyword Ann will trigger a tooltip in the word Annex or Johann).
    • Do not use very common words like Macanese because then there would be tooltips sprinkled everywhere.
    • Do not add a link like <a href=”…”>John Smith</a> to a keyword because double quotes inside double quotes — invalid nesting — can cause serious problems to the website.
    • Avoid using two names where one contains the other, even if the difference is only extra words; examples to avoid:
      Keyword A: Maria Soares, Keyword B: Maria (Mimi) Soares
      Keyword A: Maria Soares, Content A: Maria (Mimi) Soares   
      Read Explanation
    • In particular, check any HTML in the keyword and in the tooltip content very carefully because coding errors like
      an unclosed tag: <div> … (missing closing </div>)
      an unclosed quote: <img src=”…>; (missing closing “)
      can cause a serious problem.

    Another fault concerns synonyms: wpTooltips allows for synonyms of the keyword to be used as well. While this appears very convenient, synonyms are not exported.

    •  

    Summary:

    • For auto-insert, make sure the keyword is unique.
    • If you must include HTML in the tooltip content, check very carefully for errors.
    • Never duplicate keywords.
    • Never have a keyword contained inside another keyword or inside any tooltip content.
    • Never insert carriage returns into tooltip content by pressing Enter; always use code like <br> instead.
    • Do not use the synonym facility.
    1