bulma-popover

WebJar for bulma-popover

License

License

MIT
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

bulma-popover
Last Version

Last Version

1.0.0
Release Date

Release Date

Type

Type

jar
Description

Description

bulma-popover
WebJar for bulma-popover
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/apnsngr/bulma-popover

Download bulma-popover

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/bulma-popover/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>bulma-popover</artifactId>
    <version>1.0.0</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/bulma-popover/
implementation 'org.webjars.npm:bulma-popover:1.0.0'
// https://jarcasting.com/artifacts/org.webjars.npm/bulma-popover/
implementation ("org.webjars.npm:bulma-popover:1.0.0")
'org.webjars.npm:bulma-popover:jar:1.0.0'
<dependency org="org.webjars.npm" name="bulma-popover" rev="1.0.0">
  <artifact name="bulma-popover" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='bulma-popover', version='1.0.0')
)
libraryDependencies += "org.webjars.npm" % "bulma-popover" % "1.0.0"
[org.webjars.npm/bulma-popover "1.0.0"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

bulma-popover

This extension is based on the bulma-tooltip extension. This extension allows for more complex content to be placed in the pop up. It is styled like Bulma's builtin box element.

Classes

  • popover popover wrapper
  • popover-trigger display popover when this element is focused
  • popover-content the content of the popover

Positions

Modifiers for selecting position:

  • .is-popover-top
  • .is-popover-right
  • .is-popover-bottom
  • .is-popover-left

Top is the default.

Active

To hold the popover open use the .is-popover-active modifier.

Example

<div class="popover is-popover-bottom">
  <button class="button is-primary popover-trigger">Table Popover</button>
  <div class="popover-content">
    <table class="table">
      <thead>
        <tr><th>Fruit</th><th>Color</th></tr>
      </thead>
      <tbody>
        <tr><td>Apple</td><td>Red</td></tr>
        <tr><td>Banana</td><td>Yellow</td></tr>
        <tr><td>Cucumber</td><td>Green</td></tr>
      </tbody>
    </table>
  </div>
</div>

Variables

Name Default Value
$popover-max-width 24rem
$popover-color $text
$popover-background-color $white
$popover-radius $radius (4px)

Versions

Version
1.0.0