Skip to content

andresgutgon/bootstrap-tooltip-extension

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 

Repository files navigation

NOT MAINTAINED

This lib is no longer maintained. I'm using https://popper.js.org for position tooltip/popover on a screen. It doesn't manage clicks just positioning but it does very well

Twitter Bootstrap tooltip extension

With this plugin extension I try to get 4 extra positions for twitter bootstrap tooltip: top-left, top-right, bottom-left and bottom-right.

Example

top left

Usage

If you want to use you have to add this file just after bootstrap tooltip. And before bootstrap popovers

  <script src="bootstrap-tooltip.js"></script>
  <script src="bootstrap-tooltip-extension.js"></script>

In your html:

  <h4 id="top-left" data-toggle="tooltip" data-placement="top-left" data-original-title="Tooltip on top left">Top Left</h4>
  <script type="text/javascript">
    $('#top-left').tooltip('show');
  </script>

css to be added

This is the css with this 4 extra positions

.tooltip.top-left .tooltip-arrow {
  bottom: -5px;
  left: 5px;
  border-width: 5px 5px 0;
  border-top-color: black;
}
.tooltip.top-right .tooltip-arrow {
  bottom: -5px;
  right: 5px;
  border-width: 5px 5px 0;
  border-top-color: black;
}
.tooltip.bottom-left .tooltip-arrow {
  top: -5px;
  left: 5px;
  border-width: 0 5px 5px;
  border-bottom-color: black;
}
.tooltip.bottom-right .tooltip-arrow {
  top: -5px;
  right: 5px;
  border-width: 0 5px 5px;
  border-bottom-color: black;
}

About

Extend boostrap bootstrap-tooltip.js with more positions

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published