Dado tus comentarios y tu comfirmación de ello, lo que quieres hacer es lo siguiente:

> Aplicar a varios elementos un tooltip cuando se haga click

Esto se puede hacer muy fácilmente mediante clases o atributos en los elementos. A continuación, te muestro dos formas:

1. Mediante click en el elemento
2. Mediante hover en el elemento (no requiere JS)


### Tooltip en click

Para esto vamos a utilizar atributos `data-` que me parecen más útiles que las clases en casos como éstos. Lo que haremos es lo siguiente:

- Todos los elementos que tengan atributo `data-tooltip` desplegarán un tooltip cuando se haga **click** sobre ellos. Para esto, es necesario usar los pseudoselectores `before` y `after`.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    $('[tooltip]').on('blur', function() {
      $(this).removeAttr('tooltip-visible');
    });
    $('[tooltip]').on('click', function() {
      $(this).attr('tooltip-visible', true);
    });

<!-- language: lang-css -->

    *,
    *:before,
    *:after {
      box-sizing: border-box;
    }

    body {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-flow: row wrap;
          -ms-flex-flow: row wrap;
              flex-flow: row wrap;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
          -ms-flex-pack: center;
              justify-content: center;
      font-size: 62.5%;
      padding: 1.5rem;
      text-align: center;
    }

    .btn {
      background: -webkit-linear-gradient(top, #fbfbfb, #f5f5f5);
      background: linear-gradient(to bottom, #fbfbfb, #f5f5f5);
      border: 1px solid #ccc;
      border-radius: 2px;
      box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.15);
      color: #222;
      font-family: 'segoe ui';
      font-size: .9rem;
      margin: 10px;
      padding: .5rem 1rem;
      -webkit-transition: box-shadow .2s ease;
      transition: box-shadow .2s ease;
    }
    .btn:hover {
      box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15), 0 5px 5px rgba(0, 0, 0, 0.12);
    }
    .btn:focus {
      outline: none;
    }
    .btn.green {
      background: #16a085;
      border-color: #16a085;
      color: #fff;
    }
    .btn.blue {
      background: #2980b9;
      border-color: #2980b9;
      color: #fff;
    }
    .btn.gold {
      background: #f39c12;
      border-color: #f39c12;
      color: #fff;
    }
    .btn.red {
      background: #c0392b;
      border-color: #c0392b;
      color: #fff;
    }
    .btn.blue {
      background: #2980b9;
      border-color: #2980b9;
      color: #fff;
    }

    [tooltip] {
      position: relative;
    }
    [tooltip]:before, [tooltip]:after {
      -webkit-transition: opacity .2s ease, -webkit-transform .2s ease;
      transition: opacity .2s ease, -webkit-transform .2s ease;
      transition: opacity .2s ease, transform .2s ease;
      transition: opacity .2s ease, transform .2s ease, -webkit-transform .2s ease;
      -webkit-transform: translateY(15px);
              transform: translateY(15px);
      pointer-events: none;
      z-index: 5;
    }
    [tooltip]:before {
      content: "";
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 9px solid rgba(0, 0, 0, 0.9);
      left: 6px;
      opacity: 0;
      position: absolute;
      top: 110%;
    }
    [tooltip]:after {
      background-color: rgba(0, 0, 0, 0.9);
      border-radius: 4px;
      color: #fff;
      content: attr(title);
      display: inline-block;
      left: 0px;
      padding: .3rem .4rem;
      opacity: 0;
      position: absolute;
      top: 130%;
      width: 125px;
    }
    [tooltip][tooltip-visible]:before, [tooltip][tooltip-visible]:after {
      opacity: 1;
      -webkit-transform: translateY(0px);
              transform: translateY(0px);
    }


<!-- language: lang-html -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <button 
      class="btn"
      tooltip
      title="Press me!"
    >
      Normal
    </button>
    <button 
      class="btn green"
      tooltip
      title="Confirm changes"
    >
      Success
    </button>
    <button 
      class="btn gold"
      tooltip
      title="Be careful!"
    >
      Warning
    </button>
    <button 
      class="btn red"
      tooltip
      title="Are you sure?"
    >
      Danger
    </button>
    <button 
      class="btn blue"
      tooltip
      title="Press me too!"
    >
      Primary
    </button>

<!-- end snippet -->

### Tooltip en hover (no requiere JS)

Para esta versión eliminamos el `tooltip-visible` y lo reemplazamos por `hover` para obtener el mismo efecto.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    *,
    *:before,
    *:after {
      box-sizing: border-box;
    }

    body {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-flow: row wrap;
          -ms-flex-flow: row wrap;
              flex-flow: row wrap;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
          -ms-flex-pack: center;
              justify-content: center;
      font-size: 62.5%;
      padding: 1.5rem;
      text-align: center;
    }

    .btn {
      background: -webkit-linear-gradient(top, #fbfbfb, #f5f5f5);
      background: linear-gradient(to bottom, #fbfbfb, #f5f5f5);
      border: 1px solid #ccc;
      border-radius: 2px;
      box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.15);
      color: #222;
      font-family: 'segoe ui';
      font-size: .9rem;
      margin: 10px;
      padding: .5rem 1rem;
      -webkit-transition: box-shadow .2s ease;
      transition: box-shadow .2s ease;
    }
    .btn:hover {
      box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15), 0 5px 5px rgba(0, 0, 0, 0.12);
    }
    .btn:focus {
      outline: none;
    }
    .btn.green {
      background: #16a085;
      border-color: #16a085;
      color: #fff;
    }
    .btn.blue {
      background: #2980b9;
      border-color: #2980b9;
      color: #fff;
    }
    .btn.gold {
      background: #f39c12;
      border-color: #f39c12;
      color: #fff;
    }
    .btn.red {
      background: #c0392b;
      border-color: #c0392b;
      color: #fff;
    }
    .btn.blue {
      background: #2980b9;
      border-color: #2980b9;
      color: #fff;
    }

    [tooltip] {
      position: relative;
    }
    [tooltip]:before, [tooltip]:after {
      -webkit-transition: opacity .2s ease, -webkit-transform .2s ease;
      transition: opacity .2s ease, -webkit-transform .2s ease;
      transition: opacity .2s ease, transform .2s ease;
      transition: opacity .2s ease, transform .2s ease, -webkit-transform .2s ease;
      -webkit-transform: translateY(15px);
              transform: translateY(15px);
      pointer-events: none;
      z-index: 5;
    }
    [tooltip]:before {
      content: "";
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 9px solid rgba(0, 0, 0, 0.9);
      left: 6px;
      opacity: 0;
      position: absolute;
      top: 110%;
    }
    [tooltip]:after {
      background-color: rgba(0, 0, 0, 0.9);
      border-radius: 4px;
      color: #fff;
      content: attr(title);
      display: inline-block;
      left: 0px;
      padding: .3rem .4rem;
      opacity: 0;
      position: absolute;
      top: 130%;
      width: 125px;
    }
    [tooltip]:hover:before, [tooltip]:hover:after {
      opacity: 1;
      -webkit-transform: translateY(0px);
              transform: translateY(0px);
    }


<!-- language: lang-html -->

    <button 
      class="btn"
      tooltip
      title="Press me!"
    >
      Normal
    </button>
    <button 
      class="btn green"
      tooltip
      title="Confirm changes"
    >
      Success
    </button>
    <button 
      class="btn gold"
      tooltip
      title="Be careful!"
    >
      Warning
    </button>
    <button 
      class="btn red"
      tooltip
      title="Are you sure?"
    >
      Danger
    </button>
    <button 
      class="btn blue"
      tooltip
      title="Press me too!"
    >
      Primary
    </button>

<!-- end snippet -->