ruby-x/rubyx-debugger
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

better multiline tooltip code

Browse Source
This commit is contained in:
Torsten Ruger
2015-08-09 12:57:32 +03:00
parent 0926f1f85f
commit 8ed2a03ea9
5 changed files with 33 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
app/main/assets/css/app.css.scss
View File

@ -1,6 +1,25 @@
// Place your apps css here
@import "susy";
@import "simptip";
.tooltip {outline:none; }
.tooltip strong {line-height:30px;}
.tooltip:hover {text-decoration:none;}
.tooltip span {
z-index:10;display:none; padding:14px 20px;
margin-top:-30px; margin-left:28px;
width:300px; line-height:16px;
}
.tooltip:hover span{
display:inline; position:absolute; color:#111;
border:1px solid #DCA; background:#fffAF0;}
.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}
/*CSS3 extras*/
.tooltip span
{
border-radius:4px;
box-shadow: 5px 5px 8px #CCC;
}
$susy: (
columns: 24 ,

17
app/main/views/registers/index.html
View File

@ -17,14 +17,19 @@
</div>
{{ reg.fields.each_with_index do |attribute, index| }}
<div>
<div class="field">
<span class="simptip-position-left" data-tooltip="{{attribute.class}}">
{{index}}{{marker(attribute)}}
<div class="field tooltip">
{{index}}{{marker(attribute)}}
<span>
{{attribute.class}}
</span>
</div>
<div class="value">
<span class="simptip-position-right simptip-multiline" data-tooltip="long text with initlong text with initlong text with initlong text with initlong text with initlong text with initlong text with init">
{{attribute.object_id}}
<div class="value tooltip">
{{attribute.object_id}}
<span>
long text with initlong text with initlong <br/>
text with initlong text with initlong
<h3>text with initlong </h3>
text with initlong text with init
</span>
</div>
</div>