From 7df845437bb8a8b4cb12e47537d5889ae0352b97 Mon Sep 17 00:00:00 2001 From: vlad Date: Tue, 16 Jul 2019 13:30:30 +0800 Subject: [PATCH] feat(overridePosition): Added example --- example/src/index.js | 66 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 66 insertions(+) diff --git a/example/src/index.js b/example/src/index.js index dcae3aae..6eb02f46 100755 --- a/example/src/index.js +++ b/example/src/index.js @@ -427,6 +427,72 @@ class Test extends React.Component { +
+

Override position

+

+ Try to resize/zoom in window - tooltip in this sample will try to + magnet to window borders, top left border is priority here. Idea is following: + sometimes you have custom border cases, like custom scrolls, small windows, + iframes, react-tooltip itself can not cover everything, so up to you if you want to customize + default behavior, or may be just limit it like in this example. +

+
+
+ ( •̀д•́) override + { + const d = document.documentElement; + + left = Math.min(d.clientWidth - node.clientWidth, left); + top = Math.min(d.clientHeight - node.clientHeight, top); + + left = Math.max(0, left); + top = Math.max(0, top); + + return { top, left } + } }> +
header
+ lorem image 100x1500 +
footer
+
+ ( •̀д•́) noOverride + +
header
+ lorem image 100x1500 +
footer
+
+
+
+
+
+              
+

{ ` +( •̀д•́) override + { + const d = document.documentElement; + + left = Math.min(d.clientWidth - node.clientWidth, left); + top = Math.min(d.clientHeight - node.clientHeight, top); + + left = Math.max(0, left); + top = Math.max(0, top); + + return { top, left } +} }> +

header
+ lorem image 100x1500 +
footer
+ +( •̀д•́) noOverride + +
header
+ lorem image 100x1500 +
footer
+
` }

+
+
+
)