Add tooltips

This commit is contained in:
Gabriel Augendre 2022-10-30 18:13:03 +01:00
parent 725c097ec7
commit 66c5b3e00b
3 changed files with 34 additions and 5 deletions

View file

@ -67,23 +67,43 @@
<tbody class="table-group-divider">
<tr>
<th scope="row">Initiative</th>
<td>{{ character.initiative }}</td>
<td data-bs-toggle="tooltip"
data-bs-placement="top"
data-bs-title="valeur DEX">
{{ character.initiative }}
</td>
</tr>
<tr>
<th scope="row">Att. contact</th>
<td>{{ character.attack_melee|modifier }}</td>
<td data-bs-toggle="tooltip"
data-bs-placement="top"
data-bs-title="{{ character.level }} (niveau) + {{ character.modifier_strength }} (mod. FOR)">
{{ character.attack_melee|modifier }}
</td>
</tr>
<tr>
<th scope="row">Att. distance</th>
<td>{{ character.attack_range|modifier }}</td>
<td data-bs-toggle="tooltip"
data-bs-placement="top"
data-bs-title="{{ character.level }} (niveau) + {{ character.modifier_dexterity }} (mod. DEX)">
{{ character.attack_range|modifier }}
</td>
</tr>
<tr>
<th scope="row">Att. magique</th>
<td>{{ character.attack_magic|modifier }}</td>
<td data-bs-toggle="tooltip"
data-bs-placement="top"
data-bs-title="{{ character.level }} (niveau) + {{ character.attack_magic|sub:character.level }} (mod. {{ character.profile.magical_strength }})">
{{ character.attack_magic|modifier }}
</td>
</tr>
<tr>
<th scope="row">Défense</th>
<td>{{ character.defense }}</td>
<td data-bs-toggle="tooltip"
data-bs-placement="top"
data-bs-title="10 + {{ character.armor }} (armor) + {{ character.shield }} (shield) + {{ character.modifier_dexterity }} (mod. DEX) + {{ character.defense_misc }} (misc)">
{{ character.defense }}
</td>
</tr>
</tbody>
</table>

View file

@ -9,3 +9,8 @@ def modifier(value):
return f"+{value}"
else:
return value
@register.filter
def sub(value, arg):
return value - arg

View file

@ -40,5 +40,9 @@
<script src="{% static "vendor/bootstrap-5.2.2.bundle.min.js" %}"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"></script>
<script type="application/javascript" defer>
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
</script>
</body>
</html>