Boot Strap ToolTip Usage

Boot Strap ToolTip

by Shrikrishna Gupta

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css">
<input data-bind="value: first, tooltip: { title: firstHelp, placement: 'bottom' }" />

<input data-bind="value: last, tooltip: { title: lastHelp }" />
<a title="Click on this to view all available brands" id="car_15439" href="https://www.google.com" data-bind="tooltip: { title: this }">Name</a>

CSS

.ui-tooltip,
  .arrow:after {
    background: white;
    border: 2px solid #008FD4;
  }
  
  .ui-tooltip {
    padding: 10px 20px;
    color: #008FD4;
    border-radius: 2px;
    font: 12px "Helvetica Neue", Sans-Serif;
    margin box-shadow: 0 0 7px black;
  }
  
  .arrow {
    width: 70px;
    height: 16px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -16px;
  }
  
  .arrow.top {
    top: -16px;
    bottom: auto;
  }
  
  .arrow.left {
    left: 20%;
  }
  
  .arrow:after {
    content: "";
    position: absolute;
    left: 20px;
    top: -20px;
    width: 25px;
    height: 25px;
    box-shadow: 6px 5px 9px -9px black;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  
  .arrow.top:after {
    bottom: -20px;
    top: auto;
  }

JavaScript

ko.bindingHandlers.tooltip = {
  init: function(element, valueAccessor) {
    var local = ko.utils.unwrapObservable(valueAccessor()),
      options = {};

    ko.utils.extend(options, ko.bindingHandlers.tooltip.options);
    ko.utils.extend(options, local);

    $(element).tooltip(options);

    ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
      $(element).tooltip("destroy");
    });
  },
  options: {
   trigger: "hover",
    position: {
      my: "center bottom-20",
      at: "center top",
      using: function(position, feedback) {
        $(this).css(position);
        $("<div>")
          .addClass("arrow")
          .addClass(feedback.vertical)
          .addClass(feedback.horizontal)
          .appendTo(this);
      }
    }
  }
};

ko.applyBindings({
  first: ko.observable("Bob"),
  firstHelp: ko.observable("Enter a first name"),
  last: ko.observable("Smith"),
  lastHelp: ko.observable("Enter a last name")

});