diff --git a/changelog.md b/changelog.md
index 2014990..3491f2d 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,7 +1,9 @@
# The Modding Tree changelog:
+## v2.6.2 - 6/10/21
- Broke up style.css into many files to make it easier to find and customize what matters. If you already have custom CSS, keep that and ignore the new ones maybe?
- Added buyable and clickable trees.
+- Added optional tooltips to upgrades, buyables, clickables, milestones, and gridables.
- Fixed the passiveGeneration display.
- Fixed "marked" feature.
- doReset now will function on non-numeric rows besides "side".
diff --git a/docs/buyables.md b/docs/buyables.md
index baf568e..6a28fd0 100644
--- a/docs/buyables.md
+++ b/docs/buyables.md
@@ -55,6 +55,8 @@ Features:
- marked: **optional** Adds a mark to the corner of the buyable. If it's "true" it will be a star, but it can also be an image URL.
+- tooltip: **optional**. Adds a tooltip to this buyable, appears when it is hovered over. Can use basic HTML. Default is no tooltip. If this returns an empty value, that also disables the tooltip.
+
- layer: **assigned automagically**. It's the same value as the name of this layer, so you can do `player[this.layer].points` or similar.
- id: **assigned automagically**. It's the "key" which the buyable was stored under, for convenient access. The buyable in the example's id is 11.
diff --git a/docs/clickables.md b/docs/clickables.md
index 42d7e25..d0874c4 100644
--- a/docs/clickables.md
+++ b/docs/clickables.md
@@ -44,6 +44,8 @@ Features:
- marked: **optional** Adds a mark to the corner of the clickable. If it's "true" it will be a star, but it can also be an image URL.
+- tooltip: **optional**. Adds a tooltip to this clickable, appears when it is hovered over. Can use basic HTML. Default is no tooltip. If this returns an empty value, that also disables the tooltip.
+
- layer: **assigned automagically**. It's the same value as the name of this layer, so you can do `player[this.layer].points` or similar.
- id: **assigned automagically**. It's the "key" which the clickable was stored under, for convenient access. The clickable in the example's id is 11.
diff --git a/docs/grids.md b/docs/grids.md
index 7a6469e..a71883e 100644
--- a/docs/grids.md
+++ b/docs/grids.md
@@ -65,4 +65,6 @@ Features:
- getEffect(data, id): **optional**. A function that calculates and returns a gridable's effect, based on its position and data. (Whatever that means for a gridable)
+- getTooltip(data, id): **optional**. Adds a tooltip to the gridables, appears when they hovered over. Can use basic HTML. Default is no tooltip. If this returns an empty value, that also disables the tooltip.
+
- layer: **assigned automagically**. It's the same value as the name of this layer, so you can do `player[this.layer].points` or similar.
\ No newline at end of file
diff --git a/docs/milestones.md b/docs/milestones.md
index 924a978..8af1f8f 100644
--- a/docs/milestones.md
+++ b/docs/milestones.md
@@ -33,6 +33,8 @@ Milestone features:
- unlocked(): **optional**. A function returning a boolean to determine if the milestone should be shown. If absent, it is always shown.
+- tooltip: **optional**. Adds a tooltip to this milestone, appears when it is hovered over. Can use basic HTML. Default is no tooltip. If this returns an empty value, that also disables the tooltip.
+
- layer: **assigned automagically**. It's the same value as the name of this layer, so you can do `player[this.layer].points` or similar.
- id: **assigned automagically**. It's the "key" which the milestone was stored under, for convenient access. The milestone in the example's id is 0.
diff --git a/docs/upgrades.md b/docs/upgrades.md
index bfb5d9f..e778fef 100644
--- a/docs/upgrades.md
+++ b/docs/upgrades.md
@@ -43,6 +43,8 @@ Individual upgrades can have these features:
- style: **optional**. Applies CSS to this upgrade, in the form of an object where the keys are CSS attributes, and the values are the values for those attributes (both as strings).
+- tooltip: **optional**. Adds a tooltip to this upgrade, appears when it is hovered over. Can use basic HTML. Default is no tooltip. If this returns an empty value, that also disables the tooltip.
+
- layer: **assigned automagically**. It's the same value as the name of this layer, so you can do `player[this.layer].points` or similar.
- id: **assigned automagically**. It's the "key" which the upgrade was stored under, for convenient access. The upgrade in the example's id is 11.
diff --git a/js/Demo/demoLayers.js b/js/Demo/demoLayers.js
index 1513ae1..1ecd92d 100644
--- a/js/Demo/demoLayers.js
+++ b/js/Demo/demoLayers.js
@@ -109,7 +109,8 @@ addLayer("c", {
description: "Gain 1 Point every second.",
cost: new Decimal(1),
unlocked() { return player[this.layer].unlocked }, // The upgrade is only visible when this is true
- branches: [12]
+ branches: [12],
+ tooltip: "hi",
},
12: {
description: "Point generation is faster based on your unspent Lollipops.",
@@ -244,7 +245,6 @@ addLayer("c", {
fillStyle: {'background-color' : "#FFFFFF"},
baseStyle: {'background-color' : "#696969"},
textStyle: {'color': '#04e050'},
-
borderStyle() {return {}},
direction: RIGHT,
width: 300,
diff --git a/js/Demo/demoMod.js b/js/Demo/demoMod.js
index d70c1db..0b05b37 100644
--- a/js/Demo/demoMod.js
+++ b/js/Demo/demoMod.js
@@ -11,7 +11,7 @@ let modInfo = {
// Set your version in num and name
let VERSION = {
- num: "2.6.1",
+ num: "2.6.2",
name: "Fixed Reality",
}
diff --git a/js/components.js b/js/components.js
index 8ab36cb..53a15e7 100644
--- a/js/components.js
+++ b/js/components.js
@@ -172,7 +172,7 @@ function loadVue() {
Vue.component('upgrade', {
props: ['layer', 'data'],
template: `
-
`
})
@@ -203,9 +205,11 @@ function loadVue() {
Vue.component('milestone', {
props: ['layer', 'data'],
template: `
-