Formatting: Tooltips


About

Formatting Tooltips is an HTML format for displaying interactive text boxes that appear when the cursor placed over the desired element. - (Demo).



Specification




Configuration



Description

skin
Background text box. Supports all skins listed in the List of Skins.
width
Box width (in px). For example, 300.

By default, the system will automatically determine the width within a range of 50px to 200px.

height
Box height (in px). For example, 200. By default, the system will automatically determine the height.



Usage

  1. Use the span element with the following format: 

          
<span class='w-tooltips'>
  Tooltip Title
  <span class='w-content'>
    Tooltip Content. Can be text or a link!
  </span>
</span>

    RESULT
    Tooltip Title Tooltip Content. Can be text or a link!


  2. Adding Configurations Add the desired configurations by including the attribute data-configuration-name='Value' on elements with the class w-tooltips.

    Configuration Example: 
          
<span class='w-tooltips' data-skin='blue' data-width='300'>
  Tooltip Title
  <span class='w-content'>
    Tooltip Content. Can be text or a link!
  </span>
</span>

    RESULT
    Tooltip Title Tooltip Content. Can be text or a link!

  3. Limitations: This formatting cannot be used inside elements that are initially hidden, such as tabs and details.
Have Question?