Menu
I am trying to make tooltips in pure css and I would like them to be responsive, meaning they should float inside and where there is no space on left side they should show on the right side or top or bottom side for example.
I am trying something like this
Fiddle
span {
position: relative;
}
div {
margin: 150px 100px 50px 50px;
border: 1px solid Black;
height: 100px;
}
left,
right,
bottom,
top {
position: absolute;
background: black;
color: white;
max-width: 90px;
}
left {
left: 0;
}
right {
right: 0;
}
bottom {
margin: 0 auto;
bottom: 0;
left: 0;
right: 0;
}
top {
margin: 0 auto;
top: 0;
left: 0;
right: 0;
}<span>
<div>
<top>
TOP
</top>
<bottom>
BOTTOM
</bottom>
<right>
RIGHT
</right>
<left>
LEFT
</left>
</div>
</span>But it really doesn't work.
The real problem is that I can't set fixed widths for the parent element because they have to adapt to any parent element.
I am wondering if is this still possible in pure CSS but looks like I must calculate everything in javascript...
690
From what I understand you are doing everything fine, but you just forget that you parent is an inline element (<span>) therefore you must set it as display:inline-block/block in order to work.
From MDN
HTML (Hypertext Markup Language) elements are usually "inline" elements or "block-level" elements. An inline element occupies only the space bounded by the tags that define the inline element. Elements
The following elements are "inline":
b, big, i, small, tt abbr, acronym, cite, code, dfn, em, kbd, strong, samp, time, var a, bdo, br, img, map, object, q, script, span, sub, sup button, input, label, select, textarea
So with that in mind your fiddle will be something like this:
span {
position: relative;
display: block
}
div {
margin: 150px 100px 50px 50px;
border: 1px solid Black;
height: 100px;
}
left,
right,
bottom,
top {
position: absolute;
background: black;
color: white;
max-width: 90px;
}
left {
left: 0;
}
right {
right: 0;
}
bottom {
margin: 0 auto;
bottom: 0;
left: 0;
right: 0;
}
top {
margin: 0 auto;
top: 0;
left: 0;
right: 0;
}<span>
<div>
<top>
TOP
</top>
<bottom>
BOTTOM
</bottom>
<right>
RIGHT
</right>
<left>
LEFT
</left>
</div>
</span>Note: with the snippet above the left/right child will be out of the div parent (without changing margin to it), which I'm not sure that's what you want.
So another option (if you want to keep them inside the div parent) is to set the div with position:relative
So in your fiddle by just adding that we have this result:
div {
margin: 150px 100px 50px 50px;
border: 1px solid Black;
height: 100px;
position: relative
}
left,
right,
bottom,
top {
position: absolute;
background: black;
color: white;
max-width: 90px;
}
left {
left: 0;
}
right {
right: 0;
}
bottom {
margin: 0 auto;
bottom: 0;
left: 0;
right: 0;
}
top {
margin: 0 auto;
top: 0;
left: 0;
right: 0;
}<span>
<div>
<top>
TOP
</top>
<bottom>
BOTTOM
</bottom>
<right>
RIGHT
</right>
<left>
LEFT
</left>
</div>
</span>Here is a fully responsive tooltip or modal which utilizes no javascript. (external link to Codepen) You can activate the popup by hovering or clicking.
If you hover, the popup will dismiss once it loses focus (this is the typical behavior experienced on desktop for a tooltip).
You can also click the logo which is what would be done to trigger the popup on a mobile device. If you have activated the popup via click, the popup will remain open until you click the popup a second time to dismiss it. (This is the type of behavior that you would experience on a mobile device with a tooltip or modal window)
This utilizes no javascript by leveraging the CSS pseudo attribute :target and pointer-events. For the :hover and :active classes I have used the general sibling selector and the immediate sibling selector because there is a known bug in some browser when you combine the use of pseudo selectors paired with sibling selectors.
.badge {
position: relative;
width: 300px;
text-align: center;
user-select: none;
-webkit-transform: translateZ(0);
}
.logo {
background-image: url('data:image/gif;base64,R0lGODlhyADIAMQdAG1tbWlpadLS0tvb22RkZPv7+4yMjHZ2dqqqqsrKynx8fLOzs+jo6GBgYKOjo1xcXIODg7q6uu7u7pSUlJubm3FxcfLy8vb29uHh4cLCwv///3R0dHNzc////wAAAAAAACH5BAEAAB0ALAAAAADIAMgAAAX/YCeOZGmeaKqupua+cFxYzCAkWbQsSO/vkUxCMGBYCrEkjMVsOp/QqBSqjFkGiYjDAFFsAIQGgRAom89jMYCjgBgckcTAUl1O7/i8Xl/XFBgCCBMQYGNjAQBrGxwbixyMjZCNBxWJAYZjABATCAIMSHV7oqOkeX0MGQ6EBA8NiBUVko+Ljo+2s7SMkLawAAENDwSaDhkMfaXIycoiVQUDEQYHrGQAB9a1utm329zduNa+YQQHBgsDF1XL6utUSs4IEJdkFY259ZHa2vXetvizuPUqyAsAoROoJOwSKhxRhcGCVcLoHcBWi+I2R5H8VdSF7eKsAxwKaVpgTMnCk8mU/1jIYOBXgFj8KmrE6LEfzXz8+vES6MpABjoIUQrFo8ShggYNqoHMWJPjvo409+2aapNWLly3JgFAqoCkyaFgmygZ4ABAMHodser0eJOqxm4boUK1yYEVAAcDvobd2yIGBgpmA2wAmZXjLosbcVL9989f05wcQQZ4AIAChqB8+SYh+wuA45yJ1S5emy0j4sKouVUECSYAXsyZUSZhUDap47R0RV+kKFXf4beFr+4uTevA1rsl7cRWGOPCgsmKQmNkmrtxTG9MqesmThpnrsAL0ClfviyJAAUPAkyUVbrqTYtT79U0rU/mZ8a64TM6MFmBANjkkRIDAxOIwcFEV4UGmf9ha+FDH1zYKYbbYaRhA1IYEyTnQoACxhDBAQ9UsN5o+KnGWFrvlYgfigzCNVeDuBnXwAYRAMihFH4Z4Ip2KyqW2m0LWnWad9NNqJ+KNv1iwGXj3djOCxlsdWBbbun0VHv1VdWiVA6eBuSDPkpXCyVJZRCDk0+6cMEE6RGGJFb0fSafYe85aOJMcF5nnVP5JFbcZBOI9wKaTMQwAHrVxOdnW4hF1dR9CT6amomqsYilfMY9oEBeTRJaQgwZ/HJfhI/tWd2kW+bJokzB9QZhd6u5YmannnYQgwNkjPhmd6fWKaGR2/GZm1zD9fgiN/wR4MBBGtRKAgwSGBCim0eaxiP/hdfeRmWxjQnnqJXz8TYqhZQ8YIAEtN4IAwMgosUobvK5yqWLeWYF76IM8gjkitO5aNEDB2hYKwwCmDXihBXyViLCRPpppVVbvggcxL+Fi90BSf03KJoEX0KYcAsDpKBv9u45rnsIU2wqrKeS2uCBZGi8obpQlgFpyaguBl+k9r6bM6/2SPhwTAxTnOysM5MHQwZk2CMnhWz1Oxe8u0GsML/HAju1jySf+Ah/DSDd7HIwLEDZUi2itm2vvnIXn55YBntPVFZ7i2qR2RVn1gLpygZlm7y+XSmlc47c7eGN9uq1q1A/3Hba2/L3gNiaQZkU2j9SqiLDPYLbM0Dceq3o/4IkCt51scYRQDlYBOdKMpX9Zk66yr4ZXmHCkrAaHMuDv637gZfIPLbfLgxQBoKmnqxzXEF7XuqlxELG+c8/x2WdkGVwmjRzLzAAhpu7DmfnuymOv7jJu/P5+M2rPj+qtbdIA4DA3LsgAcZL2Q56vSZPvS9234ob3FQGu2F5SWJcA9EB0LUxdrygANKilrDK9xg8SW9zvZugaNgHNCSBKW2B8xyIDHCQhMDAAQ84kADDV6y1VYleydOZqvgFmpJZ6kQIvJ1NHuCAvoliacIo2vNEBxrrYY1i3gpgy9Sin/+dz4MV7AclVOdDU7wAA8eLmtxaRrtXWRBkr9vZ5+4kRv/NKVFz1zsRfwLApO11SAMXOArayoi+031rXKzSVpeyJjRgeedH0TtSlnSCMQUIKiUvYJML3Ua1PybMaUQbmcNC97I5FZGJtbNe0OSygQdMoIpRgEECziYk8aGPUbd7XKvqZbfpOVFIKYMcz5rXmyYywiwJAOUTrugL8DnPTrnDWePCZ7uneRGHbgthinRYy5e5B0b8AUAbRwEDHX1MUZIM4ZtAZiQCXtCRIVOfC/FER0oqaBEYM4AuWbC0BqBFZJU6FjYLOB/2OLNqsSsaGO8FRc/5CphMVFjY1qmC7nFAPVoiFeNeiEbfCXNx2YQV5xpZOxA2L5hc4qYt+MOB5Fj/0QUFOtlCt7awxLkvoh1s6FNQ5MrR7UujuwPmBhrwyQbiyAUCsI2cYsfQbWKUZ9Wx5asYWU/TedBwgQQnJFW2FZnd4QVxHAfXXrpPimoTmYOkE0VvWJ98XjCb07No/AhgSJs6oWwphBpAH0pEMKptdJmkl7YgNM7MpSyspBvabh7AN7MWyn5ZFBpWRzM3tRIQkhWzZ10xGdB4mdGGqCwsdRxLpyeukYHDE8sLUChBnkLvOstsaUqlt8xhXbVzee2aPGXRJcOAqId+LagLMJCI1d6tsthK7c3sebqh2rG04VzZbdva05k0whfT1KwLHDAjlwlRS+OD1CZLGSHm/Q6G/8c0ajmXSBf9UaoBsHVjCq6ICNEJkqTdvagAgYrXtZ62SMWdaJCMyladITe2fXEBBRqAoLdkVIZ9fN+8suTZ1j4yuuq1468ax9I9cmdiQZ1peDOLAl565n+LdK98axjTuE1WavzzrtXQmJ2Apk86QfqCNPHLkM2mNXCCVKniuLtBGMnuoQDFo8gyDLu68hhGPPThCyTgi+yG04/7bM9CicaW/Ow2u26Vq46d16cWSggRmJWtBsxWYsSKycZMhhFPoydclip5vsZ66SVdRjgx1oKvLH6BBRQgVcKSkT2utA+x7AZPEANVWJdiLDy12LDKUvfMVXYczMoqXma4IAHuBP+tRj+MuyZb6kp37JNMraUwVBIxWDo8HA0fPMxnNiCXja5mc4co2OGuDL6vDtluF6noPvLPuXTlYpSJm85OdQ8Rk3xuahNaupJKtIvgvFMdf7PV6j6RxmqjiC88+ikXLIC/OEPsN7l1aRyjuNgGDHUA3TvYGtfXoXDrBsb6SuEHtsTPos7gl7OtzGV3k67WbbX5zonB4EpKk6TiDwlt+oIBAOCdVTvxC/eda7dIjZ4ybXKpBmxoVvpWtdONNpm5UQntPcsFCCCARXf2oE5rW6LdxZYf003OSjtl5fRO7Ovwnd5uVIAACGjgAyFAAOY1VLGtzmsOdTfmc3LVsz/XYFH/JxnFQO+OABA4pK2KB+y7NdK2JMYkrDNo7l0p74wWRBmrw+QorvbJFx6fugYiQAB6IM7Yg6Pben36Vk3vdH/PnTf1uFbRqSq8n/24eY02VM2eIxiA4KLd++ZOtwPq9bpFd/qd07dKMJ+XOEjMiTTUORv+VMuS+RI33ePF3qyCeaiUBrXETYt3IyYIj3xODX8ClgSmuT23lBecdCftcrmz+eI+B/wjQUs4G26xyoWly83FttwHDClM27Yq1+u7cSRP3tixvzjftRn2yRo6yDAoAM+THO7Lb5/45yaSaRvsew4X28zg9uZVp7wBqDOLyIJ5a1W7OFcusg2DnoZ52GV5/9F1Z3n0bNcyOyhmYBuAZa1zYdrRfnjjZLQmTqilciQyZVS2dR+UN8d3T6UmdpTFTWAgPAgAMDd2a+XWPv40Y9FmZazHQoE2YommOHyGdEY0droAIjmXSNgmV9o3TM/3e6TzMZmHaaNlHwolaRYzVRmWbvFDU3IWD9viMEt2cdfgYPzWZSBRCQcnEeAzUY5gDV4YC9YgfBE4EV54cINxV14kYuXzJxAAFAa3BuB2blUoRb5QXk5Ug5HwC2JABmmQFPRVKTcXiJcADDqFeRrFGkhxCIP4El+UaKWkZuJTC4nAKQnQdnEHYMSGTbygAKLoBUoFQGFwABSwABlABFmAAP8GUAHBIF3xsxVQBwdDkAALsAWBgTynYw1hUAGcsIpYkAGCMFMiJ0G553d4djI3h2psBxPdFIGAhoEqNgcScCgBgHy+MxhmAQHFUAcYEAFHkShAlSwUIADMAgMDsAAYIyLJxI0NoAARoCEDkgEQcDab01oRl0bbJ3jLJXITOGpPpngOCEcKkH+jpg3RtADpWAXO0UsTNFMQIDx1YAG4AoH2kjoOICh9UAAR8D1RFocYRXYWoSwuYACGx38R9oZWggglIQEHqYwbhQgUqQE1QAT0qAEC4Dpd0gAQgFn2YwMYAJQuEAHudBvJgmrQYgNFsBk350u80zuLBxUEoE7i13P/I3lmN7h9DTg/9nOQSaRuJQgDFrAA0eAL1WAAEcCRm5goG+WTHMkSxvESbRABQAFyq4YLYDB4LuCRZ4kIBwABC3CXGkBb6sFNh1VPfHQL9jdngnFvUol4jeGSX5l/rXQVcPYCAoAxwnBw4aApbbR2KfQnbCRnbJIUvZCIG9BGcYRQb9mDs3UU1OCFpyg8mxgLddMoD4dnjjMJAaAANPAF/7WMMgd4g0GZGgCT2VhOvfYCozQjzOMKwjN+j1ABDcCXMBkisLQIrqA9GdAApfGbB7GT4GknExEGSqkBFFBn1xV0AzZmnlEDifB3PyeL/YCcyplUt9QA2jMAYtBZYzgj/3d5m4xAEKBQABQAME8DIhAAVTdXCwPlAgzwC5ijkGTQRgMgDAlHfh52hY+QiTsJE/4WdMHUXfgJlqHTCA3AeX4AAfxldJ0UXhdACItAAHz5nbcXUFvRRvuFTr8pKGySPzgzQoU3KU5Da3cXeARwA4aXgjLkfdJxotk4cdbJlyFaOvXwEskRcl/QUX2pIzD1NQQwATiQABMwpRgDm8bjGeq3n9pzbbgpk2rlL8ZFADjQpKHVnnlXoF6ZnDGJemugPeu5HlfjCJmpAd9ZfyyKARpqgTOJFJfzoUu6WXlZd6+lmZzIj0CzccJUfzmAlYDWcqzVY1khpXUyJgQhHnF0Yf+h9ggNQAEFlwgm+WiZqoXTcYZfU5AaQJ28lQ2bBwrsYpms9Y67ljf2YKPPoS/dlkp/1JUviaLHNqYFFxIgyBFkJR73UwZIw1yY0whrmAjgGq6QQFagkK0wlg3xqSY8N0fGtHSa5hEEsAOPeVReRYQcYaonVqPhVTBsKia08BIMNGdkoJQF4ksiYg0Im7AIOwtVeUWVQEeRkIlfOg6btG3ZNkkBwANTKikjOnNZkQjPOqX0hHPOWVudep8AwEBRBQAyU7AYcXMIIAEMMLM0W7PYWH81pQF1KGD/0HEvgJLI+K4JNYT2EgA9sJwTp1tkJ6XFBbM1k6NGFU0BS2cAoD3/BduzNtoHBikYBACrOFVexecIPusHQPtv9FY4xWq0CICQ+sZ1LOislSkuEDOrGpAAbCgvLckBQHE/MeOD4OOPp3CQmxerdjhrKsYkM1pnIVis8YRpasu225hyjOh1poovjNC1mllbpVULVQmsAhEABIttAaEJFFC6pjsBE8ApyikNEOC5bFpEDTiHlXlNn7hs/2YVj5tpiVl3M9QITLt0DSuhxoF1HNAAsHmbAYA0cMoYYAOpSPEAD4BqqzsOqkpnEBaFOSsAYKtkSFVvNfG4iDdOSvikv2tguaoADARBkBuWy/cC1yYNsLmTduirCtuFqiu493WSqyZSh/qd6Odb/3q6DUb7HMI1Xx4ILyBbmV63AQKhlO9bebl6AHd5poo6ZAKxWrELFAwguNaJNP7bVdNRBsmxX7yTh0EFwQ2IAMl6fjlzdRiBr+JmvL/2ur3yALCJAZUQEhuAWQn6O2MIfn6qHhjjtcl5UAdjESCSsxZwwarXic16KhnLdiNmvqPqahlRvk9znBUgKCcYgZEgP5iFAOVZF3yJRYf5OWCjPfl5uH9TDeabLG0UASjoTJ5GWchHETbKNMUaVmGXJH2qnD2lC7DIlzOqnZUoI0jjPZYpnu5LGY7FjTYMLdAqw4nkyP21UWbBl45Ju6bkbJLLRKqziTUIhD4VF/hpFpiQyv+GcLDICUc6EhGw0AuuwJca4LLe2gDspgFiDMscIMuU3D1guQho90D7xcuyTLKUCmLQRz3kdrlDkKm2a1Ke+MUJrAEWQAEGgLravM0TQAEToABr0JwvEAHxkMoAYADCA6eoGgDaU7c8l8oBYABKubfQyrrMwhLyYAjxnJ5t2ULG+kzFqRs3RwQmy0+UaGmqUc1aCwMT0KSvyiwFgAFZsABxEJpb5sjbIA0HEJrOkAE8oIqhaZYSiqKOUJWEWZg4QNEJYNFM45Z5uDYidhGZyADCeSUzZtPJJzW6utAgJXIqtKJEWQcXwFwuPVYVUJNVIMdbHMT3ABIPAAEWXQcFcG3/rmmJ7TMxVdilRkDSSDesoLNrkNDKPF3LoMrASTGYHZkB6PFOdSMNXRvVBMMml5AXa2wVbo0AORl+AnCPLr0qwedhWGoLv3kEPCdLuHWBoBcQFWAAjN3Yjv3Yja0ACDcYYaAAFCAHDCABNGADqjAGg6GV+2EWwJgBA4ABM2sD0LAVIqIJjE0J+QAO/DUBpD2Umz0A8PALKuTJ7UqiuGF/GoCSEhOSlOfDDajKxo0JbvkPEzEQFdAGB7XKUPkrhSAMU2QIEJgsbUeq+dzcEIDd1G2vBqx0ahO8uCJ0Esd0UJGwg1G/642rcHIPqYkI86kr1TUdXijfsEDf18Bk3loJ/2WQCGZYVcNWQCTHGLP6jA6GaLwpaqf6aRfocHBFfeeDN2jrX1Dqc3fVSgnXodgBuAT6ZTndeFq3PxZXoipldk8UY6nyJaolea92qmWnXrjRjMUzn6FVPdd3ZEznyf2EbDXURNFIhFjtdzA35MJctS5gAVRoYvdES0pYrzPEsR1WfAAMXK1ygEkH1tcblQFZqrILUj9oLFhTUe25YPCngiZsgCcnUq0qt/5UqBMnLnKDMTmryy96ZG4Lc+ozf6qy4wBHTs2UgHqirDNopGmeYJXCgw+IQ68HU1bu46QF3lPJxzOneCdspGL+U4nVx810S5M6ZL5Ag70lgPmhelB+1f9Vvl7S2GG7PWsPtlIsbknvqVgvnLLht656Hkkol+N1FOSY/mnNHIIFfDV4+GyDVqL16tsnBJ3px0ybyndjhuM1ZumCZdAAPeoZSFwa/lk4ZgtADCXZ3YniG3kGmIzyBmD9t+2ADUBetXgpVXIsBz0MTEUD4nkT2O7Jw6lhBkjkp0eaFOgX5TNL9OTYxYKaHnoXMXt5XbYwJOtgHX8t+Csobl6G/tUrWa1GR2Xv/XaVTimDOyjj7NPYnmNl/oS4pU9XXlROrGcVRDVDl3kr2MJAA7hjU3BVh1V/VjErR+zuB+d7Ln17B+kPnvN6lSqfvO7DPDM7B6okrtu6p/JISuT/mW7e07hjLLRWXU1JpgPjF5GqOgdytapFsKRdTVdgAKj1D/e2bAPkJDrKzLYoPv9h+IDMmRWrImrsluhccodEX+Lkkkt/qzfrjkrq0MXoueM/EQ4uY1v3fRkP0S2ZUJ/2AXhvS9Xqs1TCPoznTd7sOx7xNMEfrWtW7ru/MTjtcEduX+eCrm5OT1ZJ0CbzPe9+qLFufjXDz4dXQTiDult5LE6fI5cthv+BRC9W05fQAUBtH6e/Zlbmvx7758rCx1afOuiELX/0ohcn/CDOFOZodRtp/RYpJeZ05D5axB++qwdZglY4Tz9GAcjnkG+dSllhSU5nc4R6ED7mh32Dwr1+/wYEAhu3kZw5luMpiiaLqqTsrqrdlnNsn/X68kwHguKiOXaSSuVRs3j4fq5UtGdtWXvY7E722ga5Ym01i5NOg0BaLLVlndFh1WPRXOI7TQkgsPa9cbmNUZGpGZoNzpVdYeUoAjlq/b3BsQXC0OC8HQQASNzlMTU5PICRQU5e/t18jTFinvJgGhbWxl2KgclepYVtrjQ4NGmILjVhAABURqLKbrLOsk050g4+7wZWC77OSHbxuspxayljhBonEVM0eMNJ2sJmUkrnJPaqAvKCT9vndpn5566GrTPZpggjlu7YEQye0uAidGPRtFe1yGFc1W0WvYNtNDGS9+sQij7nkP8sHHXEQbt8mVBQweaL1sua+3bJqSQloq+J86JYKoNTET42BxKiS6mnobKbNIs2i9kP6EihMDXh4ln0ZTObpwrFwjrxjbmkSomVOjDOJbSqEmvuBERwhyCwFhc92uiTZrR4XA48GGb27BEJAQKonYuKJOOO2Yh+sRQUHklW197OfLft48A4kFh0CgAKpVKGR56gCYcz4+Kt1BB9c90VRiq9dz2v/ibOM4c6CkvjaXJBAYEDEVc3onjX5lVua3TCJVTtGdzjFav4k81hSJHBwJdqENBgGfTlm6fSnhqvdtZJu8kB4+jS4ldxiAwdqNBAgPfvxCa0sw99910XlHryzRH/01NsDcgVPlIRGFArIKHQwAS/fZdHEwxwgFgrBhmUXk8UKkfdPPHJtZdfEcqW3WzvVPaIDtsFwMFoxWQoCjEZNFDBa+7Zt9dVJp4Hkz0rkpiXV6ssaN2J8P3YHBn6ZYBhjsE1YUBLI9o1JGPLOejig5ZR9eVHD+qCXTTKVXSUAVZeiaUGyXj41FcSgrnWPbdI01pFXWYE6J+8pdlTJwAw0F+c4GmQwAPLOMdmgteFOWKK/QiYT1tUFYSZiGsGlAMADyQA56KmaTCBKQb20leKgD6nw4xOiZUbfWTiWU+ksUz3wIWKngrecMWNNFkuqk0KIVCSTRYiMNcQmRo18clq/2S11a7AnRGkBasjMofFlh2lt/XU1XMkEogtXXUpJlBcg44pYWgncduthk1kQAAAiVl6Zmag0tOabjMttl6mxY6DopOWYpEfAVUCay+jpfxy57poSlkurSL2e5Geav55LFvaVBeYqRLfq0EBBjyg1rkklzdwsTeZpw+nMUMUUp9tQBgLYAYUEDHKjEpwlHF4apM0uz/llKtbHjvD5Y+QNStZpSUYfSOOQy9EDAMAEAsQXVar4WSnlTZWdiPwmHgIX2VS1sYQiJ7MdcoaDHDY0booWKjFSvv5j+CCFxQO0+MmJ/MJoQ1Qt913C0BAnYhHyRWoIYXbmJJWfYwbZv5g0/9CJwTwJ/TjKmmQ7+RmukbQwYjHlie5lIvMGt/bgQ1xvaentOMDHk4YJF7ncpyasvK5482TlntxfJkCRdTJA7pvzTtwxDxBnozN9zzb4W5oRfyJPDkv60DBUxiZUAeMaofp1suZegOr54yX69x7tHPiOmPXanKs88Z7I+hEA6gHvzjtSG/W2FPO1sOp/jXQaWTjWHu6QaiL0ehhjjtg75oggACEbW3jIgprxJWwAvFpgp87W6j6NIQAlG53HPSPBwHQAONcrmLkUpfiyrUu+8RuLKwr0SSOAoAYVm+GV/IaYHwSsk2NpUhzeZbllle441jsB+bD4Blalqj3KTEdxJD/AMsqAJY16SRz9aldepDTp2tB8EwKAp+RRmUArYXRXsTQgAMkxy/XvctI0+qYCPeEpMph0UEfq8LoHBA0MOaxawkkgLJ6+D9mcM5fS7tYAH0Im5D9YH7US2IkT7XHASjgUX902oR2BkQl9XCN6cOgFpf3CvY9QAGN22Apc7THC6gKMSiK4huz2BzQMcdwm6Qjxr4kvQlsC5K9LM0eM2DD7VwGImuMVRyT1CyhxE6K8NpBfsYzymmebo8Y0JIwD5cnzdwniNs4ZITCBaNaoiAADTAAvWSITontUQMR2IAq70HPrVyRVeTDHAmrGERcHiACAf0n/PbIAABRsjy0e52//wLmpZrtbyMEsNAXpUlRBO5RAKlsJ9SGxLZWnVEjP1QYn26XggNITwFI9OdJH/fLBQTgUXOMRJfU5wqSTetviDyhRjYwqgAsIJo87Wk6LeoAG5Kncw79UpPEViiCgeMRWHVASU1KVT2e0gH6BIAmaarITX6SRRKSp1rAFgAH7JKXZ62oOinw1A2sEkFLuxMVc6gKqdhCLWulQD+nutcZBhRvV30AAbDpSdggVSyUClFVNlMCAjwKr5F9bE8jy4AFKKAB48FhtORKEWbGU32aYJ9qFbCAspqVtNaLrAUyYAB9BsCMPJvO+fC5LE9VTAR9mJ8BMmCB0eqWtJHVwGkNAPk2fW1nbyZsG5egiNC6EkBfELjtdKNrXkYRowADQAAEQKgvH2VXLyCSVDhlUAH3BgACCBjAIyd63v+iVzgDWIABhtAAye1Lu4FsIbOmgVP2gZCyBzDAAgYgVb0CeK/TPQIDMuAACIDtAfMDQAXgeyRPQYMEJV4uZQEAAQdkALd7zDCN7xbQAjBAAAiYAIjD62NPkPiMc6yAMtzrYxdPAAECYEB/oVvjJ9uYtwNIQAQcYAAIKIADYDuw5A7j5S+H98DLUAAEDOCACCRgAM/dsGOhDGU277EAFmDAAASQgAxEYAELQACf+6znCGQgAQIYAAMs0GQ4uzkPIQAAOw==');
width: 200px;
height: 200px;
cursor: pointer;
display: block;
margin: 0 auto
}
#trigger a {
display: block;
height: 100%;
width: 100%;
}
.dialog {
background: #fff;
bottom: 100%;
color: #666;
display: block;
left: -25px;
opacity: 0;
padding: 25px;
pointer-events: none;
position: absolute;
width: 100%;
transform: translateY(10px);
transition: all .25s ease-out;
}
#trigger:hover ~ .dialog,
#trigger:hover + .dialog #trigger:active ~ .dialog,
#trigger:active + .dialog {
opacity: 1;
}
.dialog:target {
opacity: 1;
pointer-events: auto;
}
.close.box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: inherit;
text-decoration: none;
}<div class="badge" style="margin-top:150px;">
<div id="trigger" class="logo">
<a href="#open1"> </a>
</div>
<div id="open1" class="dialog">
<a href="#close" title="Close" class="close box"></a>
<h2>Tooltip</h2>
<p>Click this tooltip to dismiss.</p>
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
