API tools faq
paste
Rupture

Large CSS-only tooltips demo

Rupture
May 21st, 2013
89
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.76 KB | None | 0 0
raw download clone embed print report
  1. <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2. <!-- Created with Inkscape (http://www.inkscape.org/) -->
  3.  
  4. <svg
  5. xmlns:xhtml="http://www.w3.org/1999/xhtml"
  6. xmlns:dc="http://purl.org/dc/elements/1.1/"
  7. xmlns:cc="http://creativecommons.org/ns#"
  8. xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  9. xmlns:svg="http://www.w3.org/2000/svg"
  10. xmlns="http://www.w3.org/2000/svg"
  11. xmlns:xlink="http://www.w3.org/1999/xlink"
  12.  
  13. width="650"
  14. height="800"
  15. version="1.1">
  16. <defs>
  17. <rect class="boxType1" id="rectTemp1" width="30" height="30" rx="5" ry="5"/>
  18. <style type="text/css" >
  19. .tt{
  20. color: white;
  21. background-color: black;   
  22. border-radius: 5px;
  23. padding: 5px;
  24. filter: alpha(opacity:95); KHTMLOpacity: 0.95;  MozOpacity: 0.95; opacity: 0.95;
  25. text-decoration:none;
  26. text-align: justify;
  27. font-family: Sylfaen;
  28. }
  29.  
  30. .hasttip {fill: green;}
  31. svg { background-color: beige; border: 2px dashed black;}
  32. .emphasis {color: grey;
  33. font-weight: bold;
  34. font-size: 120%;}
  35.  
  36.  
  37. .bordernot{
  38. float: right;  
  39.     fill: blue;
  40. }
  41. </style></defs>
  42.  
  43.  
  44.  
  45. <g id="layer1">
  46.  
  47. <use xlink:href="#rectTemp1" class="hasttip"
  48. id="R101" x="20" y="20"  />
  49.  
  50. <use xlink:href="#rectTemp1"
  51. id="R102" x="120" y="20"  />
  52.  
  53. <use xlink:href="#rectTemp1"
  54. id="R103" x="120" y="120"/>
  55.  
  56. <use xlink:href="#rectTemp1"
  57. id="R104"  x="20" y="120"/>
  58.  
  59. <use xlink:href="#rectTemp1" class="hasttip"
  60. id="R105" x="70" y="70"/>
  61.  
  62. <!--TTip section-->
  63.  
  64. <g
  65.   class="ttip"
  66.   id="ttip101" >
  67.   <set
  68.      xlink:href="#cttip101"
  69.      attributeName="visibility"
  70.      from="hidden"
  71.      to="visible"
  72.      begin="R101.mouseover"
  73.      end="R101.mouseout"
  74.      id="set527" />
  75.   <foreignObject
  76.      width="500"
  77.      height="800"
  78.      x="100"
  79.      y="100"
  80.  
  81.      id="foreignObject529">
  82.     <xhtml:html>
  83.       <xhtml:div
  84.          id="cttip101"
  85.          style="visibility: hidden"
  86.          class="tt">
  87.  
  88.                
  89. <xhtml:p class="ttipPar"><xhtml:span class="emphasis">№1 Lorem ipsum dolor sit amet</xhtml:span>, consectetur adipiscing elit. Duis pulvinar urna in libero dictum ut fringilla turpis fringilla. Nullam lobortis justo non massa tempus quis euismod diam congue. Integer eleifend sem in odio vulputate non laoreet tellus viverra. Praesent non turpis at enim congue consequat. Mauris in aliquet eros. Aenean nibh neque, sodales porta consequat at, lobortis id nisi. Cras tincidunt odio quis est consectetur at sodales ipsum dictum. <xhtml:br /></xhtml:p>
  90.  
  91. <xhtml:p class="ttipPar"><xhtml:i>Donec lobortis</xhtml:i> diam quis massa vulputate consectetur. Mauris tellus ligula, consectetur a vestibulum in, dictum eu tellus. Fusce ipsum elit, laoreet et porta et, lobortis id felis. Proin vel justo id nisl lobortis cursus. Maecenas convallis varius erat eu ullamcorper. Proin placerat sollicitudin egestas. Sed scelerisque auctor erat imperdiet faucibus. Ut sodales dolor non turpis vehicula sed porttitor augue vulputate. Morbi blandit eleifend quam, vitae tincidunt magna volutpat in. Aenean volutpat malesuada massa, ut fringilla velit tempor interdum. Nam et diam erat. Integer et elit libero.<xhtml:br /></xhtml:p>
  92.  
  93. <xhtml:p class="ttipPar">Nam et neque mollis libero fringilla convallis. Sed iaculis, mi id congue imperdiet, ante sem egestas lectus, nec aliquet eros est sit amet eros. Cras ultricies mattis orci a facilisis. Praesent ultricies eleifend erat. Mauris nec lectus et justo dignissim aliquet sed et nulla. Ut diam erat, hendrerit eu facilisis at, vestibulum non felis. Aenean iaculis nisi at mi bibendum egestas. Ut enim erat, pretium ac faucibus eget, egestas nec quam. Nullam non nibh at arcu placerat laoreet. Curabitur viverra laoreet condimentum. Nunc velit nulla, aliquet non lacinia quis, semper nec arcu.<xhtml:br /></xhtml:p>
  94.  
  95. <xhtml:p class="bordernot">Ut ut felis velit. Praesent ac orci nibh. Cras vitae lorem orci. Aenean eget est eros. Integer sem metus, porta ac porttitor id, congue in orci. Sed convallis interdum imperdiet. Nulla elementum rhoncus lorem ac gravida. Sed eu tortor lorem. Duis augue justo, venenatis porttitor vestibulum id, lobortis vel turpis. Phasellus pharetra mattis consequat.<xhtml:br /></xhtml:p>
  96.       </xhtml:div>
  97.     </xhtml:html>
  98.   </foreignObject>
  99. </g>
  100.  
  101. <g
  102.   class="ttip"
  103.   id="ttip105" >
  104.   <set
  105.      xlink:href="#cttip105"
  106.      attributeName="visibility"
  107.      from="hidden"
  108.      to="visible"
  109.      begin="R105.mouseover"
  110.      end="R105.mouseout"
  111.      id="set527" />
  112.   <foreignObject
  113.      width="500"
  114.      height="800"
  115.      x="100"
  116.      y="100"
  117.  
  118.      id="foreignObject529">
  119.     <xhtml:html>
  120.       <xhtml:div
  121.          id="cttip105"
  122.          style="visibility: hidden"
  123.          class="tt">
  124.  
  125.                
  126. <xhtml:p class="ttipPar"><xhtml:span class="emphasis">№2 Lorem ipsum dolor sit amet</xhtml:span>, consectetur adipiscing elit. Duis pulvinar urna in libero dictum ut fringilla turpis fringilla. Nullam lobortis justo non massa tempus quis euismod diam congue. Integer eleifend sem in odio vulputate non laoreet tellus viverra. Praesent non turpis at enim congue consequat. Mauris in aliquet eros. Aenean nibh neque, sodales porta consequat at, lobortis id nisi. Cras tincidunt odio quis est consectetur at sodales ipsum dictum. <xhtml:br /></xhtml:p>
  127.  
  128. <xhtml:p class="ttipPar"><xhtml:i>Donec lobortis</xhtml:i> diam quis massa vulputate consectetur. Mauris tellus ligula, consectetur a vestibulum in, dictum eu tellus. Fusce ipsum elit, laoreet et porta et, lobortis id felis. Proin vel justo id nisl lobortis cursus. Maecenas convallis varius erat eu ullamcorper. Proin placerat sollicitudin egestas. Sed scelerisque auctor erat imperdiet faucibus. Ut sodales dolor non turpis vehicula sed porttitor augue vulputate. Morbi blandit eleifend quam, vitae tincidunt magna volutpat in. Aenean volutpat malesuada massa, ut fringilla velit tempor interdum. Nam et diam erat. Integer et elit libero.<xhtml:br /></xhtml:p>
  129.  
  130. <xhtml:p class="ttipPar">Nam et neque mollis libero fringilla convallis. Sed iaculis, mi id congue imperdiet, ante sem egestas lectus, nec aliquet eros est sit amet eros. Cras ultricies mattis orci a facilisis. Praesent ultricies eleifend erat. Mauris nec lectus et justo dignissim aliquet sed et nulla. Ut diam erat, hendrerit eu facilisis at, vestibulum non felis. Aenean iaculis nisi at mi bibendum egestas. Ut enim erat, pretium ac faucibus eget, egestas nec quam. Nullam non nibh at arcu placerat laoreet. Curabitur viverra laoreet condimentum. Nunc velit nulla, aliquet non lacinia quis, semper nec arcu.<xhtml:br /></xhtml:p>
  131.  
  132. <xhtml:p class="bordernot">Ut ut felis velit. Praesent ac orci nibh. Cras vitae lorem orci. Aenean eget est eros. Integer sem metus, porta ac porttitor id, congue in orci. Sed convallis interdum imperdiet. Nulla elementum rhoncus lorem ac gravida. Sed eu tortor lorem. Duis augue justo, venenatis porttitor vestibulum id, lobortis vel turpis. Phasellus pharetra mattis consequat.<xhtml:br /></xhtml:p>
  133.       </xhtml:div>
  134.     </xhtml:html>
  135.   </foreignObject>
  136. </g>
  137.  
  138.  
  139.  
  140.  
  141.  
  142.  
  143.  
  144.  
  145.  
  146.  
  147.  
  148. </g>
  149. </svg>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!