Four options are available: top, right, bottom, and left aligned.
static demo
live demo
SOURCE CODE
<div class="qry-tooltip">
<button class="bttn bttn-lg">...</button>
<div class="qry-tooltip__black qry-tooltip__pop qry-tooltip__bottom">....</div>
</div>class reference
| class | values / description |
|---|---|
class="qry-tooltip"
|
The parent class for tooltips |
class="bttn"
|
default class for tooltip button |
class="bttn-[value]"
|
Specific value for button size: sm | md | lg |
class="qry-tooltip__pop"
|
Default class for tooltip popup |
class="qry-tooltip__[value]"
|
Specific value for tooltip color variation: black | purple | blue | indigo | teal | orange |
class="qry-tooltip__[value]"
|
Specific value for tooltip direction: left | right | top | bottom |
Four options are available: top, right, bottom, and left aligned.
static demo
live demo
SOURCE CODE
<div class="qry-tooltip">
<button class="bttn bttn-lg">...</button>
<div class="qry-tooltip__black qry-tooltip__pop qry-tooltip__bottom">....</div>
</div>class reference
| class | values / description |
|---|---|
class="qry-tooltip"
|
The parent class for tooltips |
class="bttn"
|
default class for tooltip button |
class="bttn-[value]"
|
Specific value for button size: sm | md | lg |
class="qry-tooltip__pop"
|
Default class for tooltip popup |
class="qry-tooltip__[value]"
|
Specific value for tooltip color variation: black | purple | blue | indigo | teal | orange |
class="qry-tooltip__[value]"
|
Specific value for tooltip direction: left | right | top | bottom |
Four options are available: top, right, bottom, and left aligned.
Live demo
SOURCE CODE
<button class="btn btn-secondary"
type="button"
data-container="body"
data-toggle="popover"
data-trigger="focus"
data-placement="left"
title="....."
data-content="....."
>
..........
</button>class reference
| class | values / description |
|---|---|
class="btn btn-secondary"
|
The default class for button |
type="button"
|
Type declaration for button |
data-container="body"
|
Avoid rendering problems in more complex components |
data-toggle="popover"
|
Initialize all popovers on a page |
data-trigger="focus"
|
Dismiss popovers on the user’s next click of a different element than the toggle element |
data-placement="left"
|
Four options are available: top, right, bottom, and left aligned. |
title="....."
|
Popover title |
data-content="....."
|
Popover content |