extends ../../_layout/default.pug

block scripts
  // Plugins and scripts required by this view
  script(src='js/tooltips.js')

block canonical
  link(rel='canonical' href='https://coreui.io/docs/components/tooltips/')

block breadcrumb
  +breadcrumb(
    [
      { href: '#', label: 'Home'},
      { label: 'Components'},
      { label: 'Base'},
      'Tooltips'
    ],
  )

block view
  +docs-components('https://coreui.io/docs/components/tooltips/')
  .row
    .col-12
      .card.mb-4
        .card-header
          strong Tooltips
        .card-body
          p Hover over the links below to see tooltips:
          +example('https://coreui.io/docs/components/tooltips/#examples')
            p
              | Placeholder text to demonstrate some 
              a(href='#' data-coreui-toggle='tooltip' data-coreui-original-title='Default tooltip') inline links
              |  with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of 
              a(href='#' data-coreui-toggle='tooltip' data-coreui-original-title='Another tooltip') real text
              | . And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how 
              a(href='#' data-coreui-toggle='tooltip' data-coreui-original-title='Another one here too') these tooltips on links
              |  can work in practice, once you use them on 
              a(href='#' data-coreui-toggle='tooltip' title='The last tip!') your own
              |  site or project.
          hr
          p Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left. Directions are mirrored when using Bootstrap in RTL.
          +example('https://coreui.io/docs/components/tooltips/#examples')
            button.btn.btn-secondary(type='button' data-coreui-toggle='tooltip' data-coreui-placement='top' data-coreui-original-title='Tooltip on top') Tooltip on top
            button.btn.btn-secondary(type='button' data-coreui-toggle='tooltip' data-coreui-placement='right' data-coreui-original-title='Tooltip on right') Tooltip on right
            button.btn.btn-secondary(type='button' data-coreui-toggle='tooltip' data-coreui-placement='bottom' data-coreui-original-title='Tooltip on bottom') Tooltip on bottom
            button.btn.btn-secondary(type='button' data-coreui-toggle='tooltip' data-coreui-placement='left' data-coreui-original-title='Tooltip on left') Tooltip on left
            button.btn.btn-secondary(type='button' data-coreui-toggle='tooltip' data-coreui-html='true' data-coreui-original-title='<em>Tooltip</em> <u>with</u> <b>HTML</b>') Tooltip with HTML
    .col-12
      .card.mb-4
        .card-header
          strong Tooltips
          span.small.ms-1  Disabled elements
        .card-body
          p
            | Elements with the 
            code disabled
            |  attribute aren’t interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip from a wrapper 
            code 
              = '<div>'
            |  or 
            code
              = '<span>'
            | , ideally made keyboard-focusable using 
            code tabindex="0"
            | .
          +example('https://coreui.io/docs/components/tooltips/#disabled-elements')
            span.d-inline-block(tabindex='0' data-coreui-toggle='tooltip' data-coreui-original-title='Disabled tooltip')
              button.btn.btn-primary(type='button' disabled) Disabled button