diff --git a/application/displayblock.class.inc.php b/application/displayblock.class.inc.php
index 8784f209c..9e36b4df6 100644
--- a/application/displayblock.class.inc.php
+++ b/application/displayblock.class.inc.php
@@ -1020,8 +1020,9 @@ JS
$sCountLabel = $aCount['label'];
$oPill = PillFactory::MakeForState($sClass, $sStateValue)
->SetUrl($sHyperlink)
+ ->SetTooltip($sStateLabel)
->AddHtml("")
- ->AddHtml("");
+ ->AddHtml("");
$oBlock->AddSubBlock($oPill);
}
$aExtraParams['query_params'] = $this->m_oFilter->GetInternalParams();
diff --git a/css/backoffice/components/_pill.scss b/css/backoffice/components/_pill.scss
index ce137e1ea..801117482 100644
--- a/css/backoffice/components/_pill.scss
+++ b/css/backoffice/components/_pill.scss
@@ -19,6 +19,7 @@
/* SCSS variables */
$ibo-pill--margin: 4px 8px !default;
$ibo-pill--padding: 6px 10px !default;
+$ibo-pill--max-width: 120px !default;
$ibo-pill--border-radius: $ibo-border-radius-300 !default;
$ibo-pill-new-state-primary-color: $ibo-color-blue-100 !default;
@@ -90,9 +91,8 @@ $ibo-pill-states-colors: (
/* Rules */
.ibo-pill {
- display: flex;
- flex-direction: row;
- align-items: center;
+ @extend %ibo-fully-centered-content;
+ max-width: $ibo-pill--max-width;
margin: $ibo-pill--margin;
padding: $ibo-pill--padding;
border-radius: $ibo-pill--border-radius;
diff --git a/css/backoffice/utils/helpers/_misc.scss b/css/backoffice/utils/helpers/_misc.scss
index 02ec4e40c..a26aa7590 100644
--- a/css/backoffice/utils/helpers/_misc.scss
+++ b/css/backoffice/utils/helpers/_misc.scss
@@ -26,6 +26,7 @@
.ibo-is-fullwidth {
width: 100%;
}
+
/* Used on all ancestors when an element needs to be fullscreen (see .ibo-is-fullscreen) */
html.ibo-has-fullscreen-descendant{
position: fixed !important;
@@ -80,6 +81,10 @@ body.ibo-has-fullscreen-descendant{
overflow-x: hidden;
text-overflow: ellipsis;
}
+.ibo-text-truncated-with-ellipsis{
+ @extend %ibo-text-truncated-with-ellipsis;
+}
+
%ibo-medallion{
position: relative;
border-radius: var(--ibo-border-radius-full);
diff --git a/sources/application/UI/Base/Component/Pill/Pill.php b/sources/application/UI/Base/Component/Pill/Pill.php
index 27ef947e8..3d20ba321 100644
--- a/sources/application/UI/Base/Component/Pill/Pill.php
+++ b/sources/application/UI/Base/Component/Pill/Pill.php
@@ -26,8 +26,10 @@ class Pill extends UIContentBlock
/** @var string */
protected $sColor;
- /** @var string URL to go to if the pill is clicked */
+ /** @var null|string URL to go to if the pill is clicked */
protected $sUrl;
+ /** @var null|string Text to display as a tooltip */
+ protected $sTooltip;
/**
* Pill constructor.
@@ -38,7 +40,6 @@ class Pill extends UIContentBlock
{
parent::__construct();
$this->SetColor($sColor);
- $this->SetUrl('');
}
/**
@@ -62,9 +63,10 @@ class Pill extends UIContentBlock
}
/**
- * @return string
+ * @see static::$sUrl
+ * @return null|string
*/
- public function GetUrl(): string
+ public function GetUrl(): ?string
{
return $this->sUrl;
}
@@ -72,6 +74,7 @@ class Pill extends UIContentBlock
/**
* @param string $sUrl
*
+ * @see static::$sUrl
* @return $this
*/
public function SetUrl(string $sUrl)
@@ -82,10 +85,42 @@ class Pill extends UIContentBlock
}
/**
+ * @see static::$sUrl
* @return bool
*/
public function HasUrl(): bool
{
return !empty($this->sUrl);
}
+
+ /**
+ * @see static::$sTooltip
+ * @return string|null
+ */
+ public function GetTooltip(): ?string
+ {
+ return $this->sTooltip;
+ }
+
+ /**
+ * @param string $sTooltip
+ *
+ * @see static::$sTooltip
+ * @return $this
+ */
+ public function SetTooltip(string $sTooltip)
+ {
+ $this->sTooltip = $sTooltip;
+
+ return $this;
+ }
+
+ /**
+ * @see static::$sTooltip
+ * @return bool
+ */
+ public function HasTooltip(): bool
+ {
+ return !empty($this->sTooltip);
+ }
}
\ No newline at end of file
diff --git a/templates/base/components/pill/layout.html.twig b/templates/base/components/pill/layout.html.twig
index 79dccc3f2..945c97fdc 100644
--- a/templates/base/components/pill/layout.html.twig
+++ b/templates/base/components/pill/layout.html.twig
@@ -4,7 +4,8 @@
<{{ sTagName }} id="{{ oUIBlock.GetId() }}"
{% if oUIBlock.HasUrl() %}href="{{ oUIBlock.GetUrl()|raw }}"{% endif %}
class="ibo-pill ibo-is-{{ oUIBlock.GetColor() }}"
- data-role="ibo-pill">
+ data-role="ibo-pill"
+ {% if oUIBlock.HasTooltip() %}data-tooltip-content="{{ oUIBlock.GetTooltip() }}" data-tooltip-show-delay="500"{% endif %}>
{% for oSubBlock in oUIBlock.GetSubBlocks() %}
{{ render_block(oSubBlock, {aPage: aPage}) }}
{% endfor %}