crop_rotate
Run
<!DOCTYPE html> <html> <style> .tooltip { position: relative; display: inline-block; padding:3px; cursor: pointer; border-bottom:1px dotted black; } .text { position:absolute; left:102%; top:0px; display:none; border:transparent solid 1px; padding:5px; color:white; background:#555; border-radius:5px; } .tooltip:hover .text { display:block; } .tooltip .text::after { content: ""; position: absolute; top: 50%; right: 100%; margin-top: -5px; border-width: 5px; border-style: solid; border-color: transparent #555 transparent transparent; } </style> <body> <h1>CSS tooltip</h1> <p>CSS tooltip from closetag</p> <div class="tooltip">Tooltip <div class="text"> www.closetag.com </div> </div> </body> </html>
PCFET0NUWVBFIGh0bWw+DQo8aHRtbD4NCjxzdHlsZT4NCi50b29sdGlwIA0Kew0KICBwb3NpdGlvbjogcmVsYXRpdmU7DQogIGRpc3BsYXk6IGlubGluZS1ibG9jazsNCiAgcGFkZGluZzozcHg7DQogIGN1cnNvcjogcG9pbnRlcjsNCiAgYm9yZGVyLWJvdHRvbToxcHggZG90dGVkIGJsYWNrOw0KfQ0KDQoudGV4dA0Kew0KICBwb3NpdGlvbjphYnNvbHV0ZTsNCiAgbGVmdDoxMDIlOw0KICB0b3A6MHB4Ow0KICBkaXNwbGF5Om5vbmU7DQogIGJvcmRlcjp0cmFuc3BhcmVudCBzb2xpZCAxcHg7DQogIHBhZGRpbmc6NXB4Ow0KICBjb2xvcjp3aGl0ZTsNCiAgYmFja2dyb3VuZDojNTU1Ow0KICBib3JkZXItcmFkaXVzOjVweDsNCn0NCg0KLnRvb2x0aXA6aG92ZXIgLnRleHQNCnsNCiAgZGlzcGxheTpibG9jazsNCn0NCg0KLnRvb2x0aXAgLnRleHQ6OmFmdGVyIHsNCiAgY29udGVudDogIiI7DQogIHBvc2l0aW9uOiBhYnNvbHV0ZTsNCiAgdG9wOiA1MCU7DQogIHJpZ2h0OiAxMDAlOw0KICBtYXJnaW4tdG9wOiAtNXB4Ow0KICBib3JkZXItd2lkdGg6IDVweDsNCiAgYm9yZGVyLXN0eWxlOiBzb2xpZDsNCiAgYm9yZGVyLWNvbG9yOiB0cmFuc3BhcmVudCAjNTU1IHRyYW5zcGFyZW50IHRyYW5zcGFyZW50Ow0KfQ0KPC9zdHlsZT4NCjxib2R5Pg0KDQo8aDE+Q1NTIHRvb2x0aXA8L2gxPg0KPHA+Q1NTIHRvb2x0aXAgZnJvbSBjbG9zZXRhZzwvcD4NCjxkaXYgY2xhc3M9InRvb2x0aXAiPlRvb2x0aXANCiAgPGRpdiBjbGFzcz0idGV4dCI+DQogIHd3dy5jbG9zZXRhZy5jb20NCiAgPC9kaXY+DQo8L2Rpdj4NCg0KPC9ib2R5Pg0KPC9odG1sPg==