Sha256: ba3b376e66b5fd89d5a5044c703b98f47b45d65a6a7662854f22441061960ff5
Contents?: true
Size: 1.77 KB
Versions: 32
Compression:
Stored size: 1.77 KB
Contents
<%- snippet = capture do %>
<a class="with-tip" title="This will be the tooltip text." href="#">Some Link With Tip</a>
<%- end %>
<p>
We are using bootstrap's tooltip library
with the class <code>.with-tip</code> as a trigger.
</p>
<p class="style-guide-result">
<%= snippet %>
</p>
<div class="style-guide-code">
<pre><code class="language-html"><%= escape_once snippet %></code></pre>
</div>
<br>
<%- info_tooltip = capture do %>
<a title="Some info." class="fa fa-info-circle with-tip" href="#"></a>
<%- end %>
<table class="with-actions-borders">
<thead>
<tr>
<th> Type </th>
<th> Example </th>
<th> Code </th>
</tr>
</thead>
<tbody>
<tr>
<td>
<b>Info tooltips</b>
These are used to add supplementary information to form labels.
The info icon is the coverable area for this tooltip and should be placed at the right side of the form label.
</td>
<td class="align-center">
<%= info_tooltip %>
</td>
<td>
<div class="style-guide-code">
<pre><code class="language-html"><%= escape_once info_tooltip %></code></pre>
</div>
</td>
</tr>
<tr>
<td>
<b>Adding icon tooltips</b>
These are used to add textual context to the action icons used with tabular data like edit, delete, and clone.
They are styled with a similar colour to the icon that they’re attached to.
</td>
<td class="align-center actions">
<%= link_to_edit_url('#', title: 'edit', no_text: true) %>
</td>
<td>
<div class="style-guide-code">
<pre><code class="language-html"><%= escape_once link_to_edit_url('#', title: 'edit', no_text: true) %></code></pre>
</div>
</td>
</tr>
</tbody>
</table>
Version data entries
32 entries across 32 versions & 1 rubygems