Tooltip CSS

Comments

• Menti

  December 2016 edited December 2016

  I've done this, but it implies writing HTML into the Twine text, which one may be comfortable with or not. Probably there's a more optimal solution.
  
  In Harlowe, I've included HTML like this:
  

  <div class="option">
  OPTION VISIBLE TEXT
  <div class="tooltip">
  TOOLTIP TEXT
  </div>
  </div>
  

  
  Then, the basic CSS declarations that hide/show the tooltip are these:
  

  .tooltip {visibility: hidden}
  .option:hover .tooltip: {visibility: visible}
  

  
  And then, just add more CSS to .tooltip to style them. This is mine:
  

  .tooltip: {
  	display: block;
  	position: absolute;
  	z-index: 100;
  	top: 150px;
  	visibility: hidden;
  	color: #333;
  	background: #ffffec;
  	padding: 10px;
  	box-shadow: 0 0 20px black;
  	opacity: .95;
  }
  
• storymasterq

  December 2016

  @ formatter.
  
  Cheers!
• rickrawson

  December 2016

  You could also try the following:
  

  <a data-passage="" class="tooltip"><span style="text-align: left; font-family: arial;">This is the answer.</span>Show answer:</a>
  

  
  The corresponding CSS:
  

  a.tooltip {font-weight: normal;} 
  
  a.tooltip span {
      z-index:10;
      display:none; 
      padding:14px 20px;
      margin-top:50px; margin-left:-40px;
      min-width: 50px;
      max-width: 450px !important;
      line-height:20px;
      border-radius:2px;        
      box-shadow: 0px 0px 8px 4px #666;
  }
  
  a.tooltip:hover span{
      display:inline; 
      position:absolute;
      border:2px solid #FFF;  
      color: #000000;
      font-weight: normal;
      text-decoration: none;
      font-size:1.0em;
      background:#FFFFCC repeat-x 0 0;
  }
  

  
  Modify the CSS to your taste.
• storymasterq

  December 2016 edited December 2016

  Hm, I can't get @Menti 's solution to work, but @rickrawson 's works well.