# How to include external files in your template (JS, CSS, etc.) | \[Guide\]

**URL:** https://forums.ankiweb.net/t/how-to-include-external-files-in-your-template-js-css-etc-guide/11719
**Category:** Card Design
**Created:** [July 27, 2021, 10:43pm UTC](https://forums.ankiweb.net/t/how-to-include-external-files-in-your-template-js-css-etc-guide/11719 "2021-07-27T22:43:49Z")
**Posts on this page:** 1
**Showing post:** 3

<div class="post-metadata">

### Author: ![kleinerpirat](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/kleinerpirat/32/19863_2.png) [@kleinerpirat](https://forums.ankiweb.net/u/kleinerpirat)
#### Post date: [July 28, 2021, 2:41pm UTC](https://forums.ankiweb.net/t/how-to-include-external-files-in-your-template-js-css-etc-guide/11719/3 "2021-07-28T14:41:20Z")

</div>

> [@01101](#):
>
> But when a strike a quite sizable text, the tooltip stays above the word, getting out of my card.

This might be a limitation caused by the Anki webview itself. I can replicate it by using Anki in window-mode (not maximized):

![Kooha-2021-07-28-16_25_21](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/3/33c0d450d469daad5c3a1624fe01f05f58526c3e.gif)

The viewport information seems to be off when the window is not maximized. Tippy (actually Popper) thinks it has enough space for the tooltips.

@01101 a quick fix for this would be to change the default top positioning to bottom:

```auto
tippy(tip, {
            content: strike.innerHTML,
            placement: "bottom", // <- changed to bottom (from top)
            allowHTML: true,
            theme: "sample",
            interactive: true,
            trigger: "mouseenter click",
            animation: "scale-extreme",
            appendTo: document.body,
        })

```

* * *

> [@01101](#):
>
> Is there a way a i can hide the striked text in the editor and unhide when needed?

The following idea is certainly worth looking into:

> [@Add Hyperlink \[Official thread\]](https://forums.ankiweb.net/t/add-hyperlink-official-thread/540/4):
>
> I first select the text I want to create a tooltip to and then write the text for the tooltip (just like the original addon already does).
> 
> ![tooltip_2](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/6/6e5a03d198d796c87256a3ec48ccdd8771ddfc30.png)

* * *

An advantage of the `<strike>` approach is that we can easily batch-edit them via RegEx into another format. Should the abovementioned idea get implemented one day, I can help you with that switch.

---

_[View the full topic](https://forums.ankiweb.net/t/how-to-include-external-files-in-your-template-js-css-etc-guide/11719)._