Only show tooltips for truncated titles

This commit is contained in:
Alex Ling 2020-04-01 05:59:46 +00:00
parent a5daded453
commit aa09f3a86f
3 changed files with 12 additions and 4 deletions

View File

@ -1,7 +1,15 @@
const truncate = () => {
$('.acard .uk-card-title').each((i, e) => {
$(e).dotdotdot({
truncate: 'letter'
truncate: 'letter',
callback: (truncated) => {
if (truncated) {
$(e).attr('uk-tooltip', $(e).attr('data-title'));
}
else {
$(e).removeAttr('uk-tooltip');
}
}
});
});
};

View File

@ -36,7 +36,7 @@
<%- if t.entries.size > 0 -%>
<div class="uk-card-badge uk-label"><%= (percentage[i] * 100).round(1) %>%</div>
<%- end -%>
<h3 class="uk-card-title break-word" uk-tooltip="<%= t.title.gsub("\"", "&quot;") %>"><%= t.title %></h3>
<h3 class="uk-card-title break-word" data-title="<%= t.title.gsub("\"", "&quot;") %>"><%= t.title %></h3>
<p><%= t.size %> entries</p>
</div>
</div>

View File

@ -45,7 +45,7 @@
<%- if t.entries.size > 0 -%>
<div class="uk-card-badge uk-label"><%= (titles_percentage[i] * 100).round(1) %>%</div>
<%- end -%>
<h3 class="uk-card-title break-word" uk-tooltip="<%= t.title.gsub("\"", "&quot;") %>"><%= t.title %></h3>
<h3 class="uk-card-title break-word" data-title="<%= t.title.gsub("\"", "&quot;") %>"><%= t.title %></h3>
<p><%= t.size %> entries</p>
</div>
</div>
@ -61,7 +61,7 @@
</div>
<div class="uk-card-body">
<div class="uk-card-badge uk-label"><%= (percentage[i] * 100).round(1) %>%</div>
<h3 class="uk-card-title break-word" uk-tooltip="<%= e.title.gsub("\"", "&quot;") %>"><%= e.title %></h3>
<h3 class="uk-card-title break-word" data-title="<%= e.title.gsub("\"", "&quot;") %>"><%= e.title %></h3>
</div>
</div>
</a>