This website requires JavaScript to deliver the best possible experience.

Tooltip

    <button tooltip="Hi, I'm a tooltip!" class="button">Hover me</button>
    button.button(tooltip="Hi, I'm a tooltip!") Hover me



      <button tooltip="Hi, I'm a tooltip!" tooltip-position="top" class="button">Tooltip on Top</button>
<button tooltip="Hi, I'm a tooltip!" tooltip-position="bottom" class="button">Tooltip on Bottom</button>
<button tooltip="Hi, I'm a tooltip!" tooltip-position="left" class="button">Tooltip on Left</button>
<button tooltip="Hi, I'm a tooltip!" tooltip-position="right" class="button">Tooltip on right</button>
      button.button(tooltip="Hi, I'm a tooltip!" tooltip-position="top") Tooltip on Top
button.button(tooltip="Hi, I'm a tooltip!" tooltip-position="bottom") Tooltip on Bottom
button.button(tooltip="Hi, I'm a tooltip!" tooltip-position="left") Tooltip on Left
button.button(tooltip="Hi, I'm a tooltip!" tooltip-position="right") Tooltip on right
        <button tooltip="Hi, I'm a tooltip!" tooltip-color="primary" class="button">Hover me</button>
<button tooltip="Hi, I'm a tooltip!" tooltip-color="secondary" class="button">Hover me</button>
<button tooltip="Hi, I'm a tooltip!" tooltip-color="info" class="button">Hover me</button>
<button tooltip="Hi, I'm a tooltip!" tooltip-color="success" class="button">Hover me</button>
<button tooltip="Hi, I'm a tooltip!" tooltip-color="warning" class="button">Hover me</button>
<button tooltip="Hi, I'm a tooltip!" tooltip-color="danger" class="button">Hover me</button>
<button tooltip="Hi, I'm a tooltip!" tooltip-color="black" class="button">Hover me</button>
<button tooltip="Hi, I'm a tooltip!" tooltip-color="white" class="button">Hover me</button>
        button.button(tooltip="Hi, I'm a tooltip!", tooltip-color='primary') Hover me
button.button(tooltip="Hi, I'm a tooltip!", tooltip-color='secondary') Hover me
button.button(tooltip="Hi, I'm a tooltip!", tooltip-color='info') Hover me
button.button(tooltip="Hi, I'm a tooltip!", tooltip-color='success') Hover me
button.button(tooltip="Hi, I'm a tooltip!", tooltip-color='warning') Hover me
button.button(tooltip="Hi, I'm a tooltip!", tooltip-color='danger') Hover me
button.button(tooltip="Hi, I'm a tooltip!", tooltip-color='black') Hover me
button.button(tooltip="Hi, I'm a tooltip!", tooltip-color='white') Hover me
          <button tooltip="Hi, I'm a tooltip!" tooltip-color="primary" tooltip-rounded="tooltip-rounded" class="button">Hover me</button>
          button.button(tooltip="Hi, I'm a tooltip!" tooltip-color="primary" tooltip-rounded) Hover me
          ModifierDescriptionValue
          Colorindicates the element state with data tooltip-color="value"

          primary

          secondary

          info

          success

          warning

          danger

          black

          white

          Positionchanges tooltip placement with data tooltip-color="value"

          top

          bottom

          left

          right

          Roundedadd rounded corners to a tooltiptooltip-rounded