Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is needed ONLY for Twitter Bootstrap's Popover?

I understand I can go to http://twitter.github.com/bootstrap/customize.html#components and select the only the components I need to make the popovers work.

I updated the js and css to link to the files downloaded. I'm not getting any errors but I'm also not getting the popover.

Original Question:
I'd like to add the popover to my site but the bootstrap's standard css file conflicts with my existing styling. From http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css, can someone tell me which bits and pieces I need just for the popovers? I used Firebug to see what classes are called but I'm obviously missing something. I don't have to use Boostrap's Popover, I'm open to other plugins if they are as easy to use.

CSS

/* CSS Document */
.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1010;
  display: none;
  padding: 5px;
}
.popover.top {
  margin-top: -5px;
}
.popover.right {
  margin-left: 5px;
}
.popover.bottom {
  margin-top: 5px;
}
.popover.left {
  margin-left: -5px;
}
.popover.top .arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #000000;
}
.popover.right .arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid #000000;
}
.popover.bottom .arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #000000;
}
.popover.left .arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #000000;
}
.popover .arrow {
  position: absolute;
  width: 0;
  height: 0;
}
.popover-inner {
  padding: 3px;
  width: 280px;
  overflow: hidden;
  background: #000000;
  background: rgba(0, 0, 0, 0.8);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}
.popover-title {
  padding: 9px 15px;
  line-height: 1;
  background-color: #f5f5f5;
  border-bottom: 1px solid #eee;
  -webkit-border-radius: 3px 3px 0 0;
  -moz-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
}
.popover-content {
  padding: 14px;
  background-color: #ffffff;
  -webkit-border-radius: 0 0 3px 3px;
  -moz-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding-box;
  background-clip: padding-box;
}
.popover-content p, .popover-content ul, .popover-content ol {
  margin-bottom: 0;
}

.fade {
  -webkit-transition: opacity 0.15s linear;
  -moz-transition: opacity 0.15s linear;
  -ms-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
  opacity: 0;
}
.fade.in {
  opacity: 1;
}

h3 {
  /*    line-height: 27px;  */
  font-size: 18px;
}

p {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 13px;
    line-height: 18px;
    margin: 0 0 9px;
}
like image 873
HPWD Avatar asked Sep 13 '12 17:09

HPWD


People also ask

How do you activate popovers?

Popovers can be triggered via JavaScript — just call the popover() Bootstrap method with the id , class or any CSS selector of the required element in your JavaScript code. You can either initialize popovers individually or all in one go.

How do I show popover on hover?

Set the trigger option of the popover to hover instead of click , which is the default one. Or with an initialization option: $("#popover"). popover({ trigger: "hover" });

What appends the popover to specific elements?

Popover Options. Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-placement="". Appends the popover to a specific element.

Is Popper required for bootstrap 5?

Many of our components require the use of JavaScript to function. Specifically, they require our own JavaScript plugins and Popper.


1 Answers

You can customize your download right on the twitter bootstrap site (here). In order to get the css just for the popover just select that and uncheck everything else, that you will allow you to download both the regular and responsive classes used on the popover alone.

like image 89
Andres Ilich Avatar answered Oct 21 '22 05:10

Andres Ilich