Private
Public Access
98 lines
2.4 KiB
PHP
98 lines
2.4 KiB
PHP
<?php return [
|
|
'about' => 'Inline info pill that reveals caller-provided HTML in a hover/focus popover.',
|
|
'render' => function($prop) {
|
|
static $assets_loaded = false;
|
|
|
|
$label = (string)first($prop['label'] ?? false, 'Info');
|
|
$content_html = (string)first($prop['content_html'] ?? false, '');
|
|
if($content_html === '' && isset($prop['content']))
|
|
$content_html = '<p>'.safe((string)$prop['content']).'</p>';
|
|
|
|
$class = trim('info-pill '.(string)first($prop['class'] ?? false, ''));
|
|
$popover_id = (string)first($prop['popover_id'] ?? false, $prop['id'].'-popover');
|
|
|
|
ob_start();
|
|
if(!$assets_loaded)
|
|
{
|
|
$assets_loaded = true;
|
|
?>
|
|
<style>
|
|
.info-pill {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
vertical-align: middle;
|
|
}
|
|
.info-pill__trigger {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 1.85rem;
|
|
padding: .24rem .65rem;
|
|
border: 1px solid var(--border, rgba(15,39,64,.18));
|
|
border-radius: 999px;
|
|
background: #e8f2ff;
|
|
color: #075a9a;
|
|
font: inherit;
|
|
font-size: .86rem;
|
|
font-weight: 800;
|
|
line-height: 1.1;
|
|
cursor: default;
|
|
}
|
|
.info-pill__trigger:focus {
|
|
outline: 3px solid rgba(15,104,173,.18);
|
|
outline-offset: 2px;
|
|
}
|
|
.info-pill__popover {
|
|
position: absolute;
|
|
z-index: 40;
|
|
left: 0;
|
|
top: calc(100% + .45rem);
|
|
width: min(28rem, calc(100vw - 2rem));
|
|
padding: .85rem .95rem;
|
|
border: 1px solid var(--border, rgba(15,39,64,.18));
|
|
border-radius: 10px;
|
|
background: #fff;
|
|
color: #0b263d;
|
|
box-shadow: 0 14px 32px rgba(18,20,23,.16);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: translateY(-.15rem);
|
|
transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
|
|
pointer-events: none;
|
|
}
|
|
.info-pill__popover p {
|
|
margin: 0 0 .55rem;
|
|
}
|
|
.info-pill__popover p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.info-pill:hover .info-pill__popover,
|
|
.info-pill:focus-within .info-pill__popover {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateY(0);
|
|
pointer-events: auto;
|
|
}
|
|
@media(max-width:560px) {
|
|
.info-pill__popover {
|
|
position: fixed;
|
|
left: 1rem;
|
|
right: 1rem;
|
|
top: auto;
|
|
bottom: 1rem;
|
|
width: auto;
|
|
}
|
|
}
|
|
</style>
|
|
<?php
|
|
}
|
|
?>
|
|
<span class="<?= asafe($class) ?>">
|
|
<button class="info-pill__trigger" type="button" aria-describedby="<?= asafe($popover_id) ?>"><?= safe($label) ?></button>
|
|
<span class="info-pill__popover" id="<?= asafe($popover_id) ?>" role="tooltip"><?= $content_html ?></span>
|
|
</span>
|
|
<?php return ob_get_clean();
|
|
},
|
|
];
|