extends ../../layouts/LayoutComponent
include ../../mixins/components/Tooltips

append variables
  
  -
    var pageHeader = {
      title: 'Tooltips',
      description: 'Documentation and examples for adding ZiON-v6.1.0 tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.',
      url: `https://getbootstrap.com/docs/${bootstrapVersion}/components/tooltips/`,
      linkText: 'Tooltips on Bootstrap'
    }

block component
  +PageHeader(pageHeader)
  

  +ComponentCard({
    title: 'Example',
    anchor: true,
    description:`Hover over the links below to see tooltips:<br>Tight pants next level keffiyeh <a href="#" data-bs-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-bs-toggle="tooltip" title="" data-original-title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-bs-toggle="tooltip" title="" data-original-title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-bs-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.`,
    descriptionClass:'mt-2 mb-0'
  })
    p Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.
    +TooltipExampleDemo