Home Components Tooltip
Tooltip
Overview Playground API
The Tooltip component is used to display additional information on hover.
Usage



Test Very large content. Very large content. Very large content.Very large content. Very large content. Very large content. 


  <goat-tooltip id="save-tooltip" content="Save the record">
    <goat-button icon="save" variant="outline"></goat-button>
  </goat-tooltip>


  <br>
  <br>
  <br>

  <goat-tooltip placements="bottom-start">
    <goat-button>Test</goat-button>

    <span slot="content">
        Very large content. Very large content. Very large content.Very large content. Very large content. Very large content.
      </span>
  </goat-tooltip>
Shared Tooltip The dropdown can be positioned relative to the trigger element. Possible positions are: top-start, top-end, bottom-end, bottom-start. You can also use the positions attribute to set all preferred position of the dropdown. On scroll, the dropdown will be repositioned to the closest position. 

  <goat-button tooltip-target="tooltip-shared" tooltip-content="Save the record" icon="save" variant="outline"></goat-button>
  <goat-button tooltip-target="tooltip-shared" tooltip-content="Delete the record" icon="trash-can" color="red"></goat-button>

  <goat-tooltip id="tooltip-shared"></goat-tooltip>
Usage Shared Tooltip
Work in progress
Properties
Events
Methods
CSS Custom Properties
Previous Next