Tooltips

Elementric components - just copy the HTML code of an element and paste it into your code (after you read the installation guide).

Standard Tooltips

You can change the tooltips title from the data-tooltip="" attribute.
To change the tootltips position, choose bottom, top, left or right in tooltip-position="" attribute.

Top Bottom Left Right

        
Copy
        
  <button type="button" data-tooltip="Top Tooltip" tooltip-position="top" class="button-standard">Top</button>
  <button type="button" data-tooltip="Bottom Tooltip" tooltip-position="bottom" class="button-standard">Bottom</button>
  <button type="button" data-tooltip="Left Tooltip" tooltip-position="left" class="button-standard">Left</button>
  <button type="button" data-tooltip="Right Tooltip" tooltip-position="right" class="button-standard">Right</button>
        
      

Tooltips Colors

You can change the tootltips color from the tooltip-color="" attribute with blue, white, green, red or yellow colors.

Default Blue White Green Red Yellow

        
Copy
        
  <button type="button" data-tooltip="Default Tooltip" tooltip-position="top" class="button-dark">Default</button>
  <button type="button" data-tooltip="Blue Tooltip" tooltip-color="blue" tooltip-position="top" class="button-standard">Blue</button>
  <button type="button" data-tooltip="White Tooltip" tooltip-color="white" tooltip-position="top" class="button-light">White</button>
  <button type="button" data-tooltip="Green Tooltip" tooltip-color="green" tooltip-position="top" class="button-success">Green</button>
  <button type="button" data-tooltip="Red Tooltip" tooltip-color="red" tooltip-position="top" class="button-danger">Red</button>
  <button type="button" data-tooltip="Yellow Tooltip" tooltip-color="yellow" tooltip-position="top" class="button-warning">Yellow</button>