tooltip bug fix with "in"

trying to fix the tooltip bug

by yohn

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-modal.js"></script>
<div class="btn-group">
    <button class="btn" title="this is my tooltip">test</button>
    <button class="btn" title="this is my tooltip">test</button>
    <button class="btn" title="this is my tooltip with a lot of text to fill up space and see if it does a line break">test</button>
</div>
<br>

<span class="text-info tp-side">using 'in right'  for placement 
</span>
<br>
<a href="#" class="pops">popover</a>
<br>
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<br>

        <div class="pin">
            <a data-title="This is my title" href="#">Title</a>
        </div>

<table class="table table-bordered">
    <tr>
        <td title="this is my tooltip - td">tip 1</td>
        <td><h1 title="this is my tooltip - td > h1">tip 2 in h1</h1></td>
        <td title="another tooltip at the end of a table">last tooltip</td>
    </tr>
</table>

<h4>Known bugs</h4>
When the tooltips / popovers are within a modal-body they need to be within the inside of the modal because otherwise they would get cut off.. examples are if the tooltip would be at the top, they get placed below the modal-header, and if they're at the bottom they get placed under the modal-footer, and if they go off the sides of the modal-body it gets cut off.

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<br>
    <span class="tp-side2">inside right</span>
<a href="#" class="pops">popover</a>
<div class="btn-group">
   ...

CSS

body {
 padding:50px;   
}

.pin {
    border: 1px solid grey;
    border-radius: 6px 6px 6px 6px;
    float: left;
    height: 90px;
    width: 90px;
    position: relative;
    overflow: hidden;
}

JavaScript

/* ===========================================================
 * bootstrap-tooltip.js v2.2.2
 * http://twitter.github.com/bootstrap/javascript.html#tooltips
 * Inspired by the original jQuery.tipsy by Jason Frame
 * ===========================================================
 * Copyright 2012 Twitter, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ========================================================== */


!function ($) {

  "use strict"; // jshint ;_;


 /* TOOLTIP PUBLIC CLASS DEFINITION
  * =============================== */

  var Tooltip = function (element, options) {
    this.init('tooltip', element, options)
  }

  Tooltip.prototype = {

    constructor: Tooltip

  , init: function (type, element, options) {
      var eventIn
        , eventOut

      this.type = type
      this.$element = $(element)
      this.options = this.getOptions(options)
      this.enabled = true

      if (this.options.trigger == 'click') {
        this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this))
      } else if (this.options.trigger != 'manual') {
        eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus'
        eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur'
        this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this))
        this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this))
      }

     ...