Sha256: f1ce5dad88a8a6d18ee20e004bf3d2887afdbd674a7ac317c2a02ab4f572510b
Contents?: true
Size: 1.78 KB
Versions: 118
Compression:
Stored size: 1.78 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
118 entries across 118 versions & 2 rubygems