Fandom.com tabview code#
Fandom.com tabview free#

Click 'Preview' to see that the code produced these tabs:.

|-|Third Tab Title=Third tab content goes here. |-|Second Tab Title=Second tab content goes here.

Copy and paste the following code into your editor.

Open an article for editing and switch to Source mode.

This is the simplest and most common usage of Tabber. There are multiple ways to use Tabber on a page. Since the tab is actually a link element, a user could right click it and click open to manually follow the link. Tab view does not provide a simple way to view/edit the original page. This is because tabbed experiences are difficult to operate on mobile devices. On mobile devices, the indicated pages are shown as a list of links rather than as tabs. There has been no word if they will eventually add it to the UCO so for those wikis that use Tabview, when they are migrated to the new platform, their pages will break. This feature is not currently available on wikis which use the new Unified Community Platform (UCP). You can not edit the subpages from the Main article without adding specific code to the subpage. You can create as many subpages as you need to break up long info dumps on a single article and to make it more user friendly. The pages should be structured like this and all assigned to the same category so they are easy to find.

WdsTooltips - a tooltip that works on both mobile and desktop.Tabview pulls in a seperate page to the main page and displays is as part of the original article.

CSS3Tooltip - a tooltip plugin made with CSS3 only.

TippingOver - an extension similar to Tooltips.js.

League of Legends Wiki: de, en, es, pl, ru, vi.

Fandom.com tabview free#

If your tooltips has shadow you might want to make space for it by adding margin to them or by adding padding to the div that contains active tooltips ( #tooltip-wrapper).įeel free to add your wiki to the list if it uses this script to show how it works in action :).tt- tooltip-type: every tooltip receives class based on its type (ex: tt-basic-tooltip) – great for having different looking tooltip types.tooltip-loading: given to tooltips that are still waiting for parsed contents to load – you can use it to show loading indicator or just hide the tooltip until it's ready.has-redlinks: given to tooltips that (as the name says) have redlinks inside – this can be used to hide tooltips with missing templates.

Debug mode can also be turned on temporarily by adding ?ttdebug=true at the end of the URL. Setting it to true will make some elements visible making it easier to spot problems. tooltips_config =, ] Debug mode – tooltips_debug

noCSS: If you want to disable import of default CSS, set it to true.

For example in a custom right rail module. This way you can make tooltips work in custom interface element that are added after the page is loaded and tooltips initialized.

events: Is a list of JavaScript events of the window object that will trigger the search for tooltips that weren't present when script was initialized.

Setting this value to true will make the script wait for all images to be fully loaded before showing the tooltip. Images will eventually show up when they are loaded (lazy loading). By default ( false) tooltips will show up even if images aren't fully loaded yet.

waitForImages: It will alter how tooltips behave when they have images inside.

Default value is 8 for both and values below 5 are not recommended.

offsetX and offsetY: These are values that the tooltip will be moved right and down (respectively) from where the cursor is pointing (remember that margin of tooltip itself can move it further).

Here you can adjust some core features using this object:

You can specify them in MediaWiki:Common.js on your wiki. There are 3 variables that contain config for the script. Without any setup, script will only support basic and advanced tooltips.