extends ../_layout/_docs-layout.pug

block variables
  - var slug = 'tooltips'
  - var parent = 'components'
  - var title = 'Tooltips - Components - Spectre.css CSS Framework'
  - var description = 'Tooltips provide context information labels that appear on hover and focus. Tooltips component is built entirely in CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'

block docs-content
  +docs-heading('tooltips', 'Tooltips')
    include ../_layout/_ad-g.pug

    p Tooltips provide context information labels that appear on hover and focus. Tooltips component is built entirely in CSS.

    .docs-demo.columns.text-center
      .column.col-xs-12
        button.btn.btn-primary.tooltip(data-tooltip="Top Tooltip Text") top tooltip
      .column.col-xs-12
        button.btn.btn-primary.tooltip.tooltip-right(data-tooltip="Right Tooltip Text") right tooltip
      .column.col-xs-12
        button.btn.btn-primary.tooltip.tooltip-bottom(data-tooltip="Bottom Tooltip Text") bottom tooltip
      .column.col-xs-12
        button.btn.btn-primary.tooltip.tooltip-left(data-tooltip="Left Tooltip Text\nMultiline") left tooltip

    p
      | Add the #[code tooltip] class and the #[code data-tooltip] attribute, which contains the tooltip content, to non self closing elements.
    p
      | And add the #[code tooltip-right], #[code tooltip-bottom] or #[code tooltip-left] class to define the position of a tooltip.
      | By default, the tooltip appears above the element.

    pre.code(data-lang='HTML')
      code
        :highlight(lang="html")
          <button class="btn tooltip" data-tooltip="Lorem ipsum dolor sit amet">top tooltip</button>
          <button class="btn tooltip tooltip-right" data-tooltip="Lorem ipsum dolor sit amet">right tooltip</button>

    +docs-subheading('tooltips-multiline', 'Multiline tooltips')

    .docs-demo.columns
      .column.col-12
        button.btn.btn-primary.tooltip(data-tooltip="First Line Tooltip Text \n Second Line Tooltip Text \n Third Line Tooltip Text") multiline tooltip

    p
      | Add the #[code \n] string between any text for multiline tooltips.

    pre.code(data-lang='HTML')
      code
        :highlight(lang="html")
          <button class="btn tooltip" data-tooltip="First Line Tooltip Text \n Second Line Tooltip Text">multiline tooltip</button>
    
    include ../_layout/_ad-c.pug

  include ../_layout/_footer.pug