2
Wie man das Tool-Tip vollständig sichtbar machen, die sich zurück zu Tabellenkopf versteckt. Ich versuchte, den Z-Index Wert und Position zu erhöhen, aber es funktioniert nicht.Ich habe meinen CSS-Code angehängt.Directional Tooltip Hiding
Dies ist meine CSS-Datei:
/* Base styles for the element that has a tooltip */
[data-tooltip],
.tooltip {
position: relative;
cursor: pointer;
}
/* Base styles for the entire tooltip */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after {
position: absolute;
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition:
opacity 0.2s ease-in-out,
visibility 0.2s ease-in-out,
-webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-moz-transition:
opacity 0.2s ease-in-out,
visibility 0.2s ease-in-out,
-moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
transition:
opacity 0.2s ease-in-out,
visibility 0.2s ease-in-out,
transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
pointer-events: none;
}
/* Show the entire tooltip on hover and focus */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after {
visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
/* Base styles for the tooltip's directional arrow */
.tooltip:before,
[data-tooltip]:before {
width: 0;
height: 0;
z-index: 1001;
border: 6px solid transparent;
background: transparent;
content: "";
}
/* Base styles for the tooltip's content area */
.tooltip:after,
[data-tooltip]:after {
z-index: 1000;
padding: 8px;
width: 160px;
background-color: #FFF;
border:solid 1px #10427d;
color: #000;
content: attr(data-tooltip);
font-size: 12px;
font-family: Arial;
font-weight:bold;
line-height: 1.2;
}
/* Directions */
/* Top (default) */
[data-tooltip]:before,
[data-tooltip]:after,
.tooltip:before,
.tooltip:after,
.tooltip-top:before,
.tooltip-top:after {
bottom: 200%;
left: 50%;
}
[data-tooltip]:before,
.tooltip:before,
.tooltip-top:before {
margin-left: -6px;
margin-bottom: -12px;
border-top-color: #000;
border-top-color: rgba(16, 66, 125, 1.0);
}
/* Horizontally align top/bottom tooltips */
[data-tooltip]:after,
.tooltip:after,
.tooltip-top:after {
margin-left: -80px;
}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after,
[data-tooltip]:focus:before,
[data-tooltip]:focus:after,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus:before,
.tooltip:focus:after,
.tooltip-top:hover:before,
.tooltip-top:hover:after,
.tooltip-top:focus:before,
.tooltip-top:focus:after {
/*background-color: white;*/
-webkit-transform: translateY(-12px);
-moz-transform: translateY(-12px);
transform: translateY(-12px);
}
/* Top Left */
.tooltip-top-left:before,
.tooltip-top-left:after {
left: 0;
}
.tooltip-top-left:before {
margin-left: 3px;
}
.tooltip-top-left:after {
margin-left: 0;
}
/* Left */
.tooltip-left:before,
.tooltip-left:after {
right: 107%;
bottom: 50%;
left: auto;
}
.tooltip-left:before {
margin-left: 0;
margin-right: -12px;
margin-bottom: 0;
border-top-color: transparent;
border-left-color: #000;
border-left-color: rgba(16, 66, 125, 1.0);
}
.tooltip-left:hover:before,
.tooltip-left:hover:after,
.tooltip-left:focus:before,
.tooltip-left:focus:after {
/*background-color: white;*/
-webkit-transform: translateX(-12px);
-moz-transform: translateX(-12px);
transform: translateX(-12px);
}
/* Bottom */
.tooltip-bottom:before,
.tooltip-bottom:after {
top: 110%;
bottom: auto;
left: 50%;
}
.tooltip-bottom:before {
margin-top: -12px;
margin-bottom: 0;
border-top-color: transparent;
border-bottom-color: #000;
border-bottom-color: rgba(16, 66, 125, 1.0);
}
.tooltip-bottom:hover:before,
.tooltip-bottom:hover:after,
.tooltip-bottom:focus:before,
.tooltip-bottom:focus:after {
/*background-color: white;*/
-webkit-transform: translateY(12px);
-moz-transform: translateY(12px);
transform: translateY(12px);
}
/* Right */
.tooltip-right:before,
.tooltip-right:after,
.tooltip-right-top:before,
.tooltip-right-top:after {
bottom: 50%;
left: 107%
}
.tooltip-right:before,
.tooltip-right-top:before {
margin-bottom: 0;
margin-left: -12px;
border-top-color: transparent;
border-right-color: #000;
border-right-color: rgba(16, 66, 125, 1.0);
}
.tooltip-right:hover:before,
.tooltip-right:hover:after,
.tooltip-right:focus:before,
.tooltip-right:focus:after,
.tooltip-right-top:hover:before,
.tooltip-right-top:hover:after,
.tooltip-right-top:focus:before,
.tooltip-right-top:focus:after {
/*background-color: white;*/
-webkit-transform: translateX(12px);
-moz-transform: translateX(12px);
transform: translateX(12px);
}
/* Move directional arrows down a bit for left/right tooltips */
.tooltip-left:before,
.tooltip-right:before,
.tooltip-right-top:before {
/*top: -5px;*/
}
/* Vertically center tooltip content for left/right tooltips */
.tooltip-left:after,
.tooltip-right:after,
.tooltip-right-top:after {
margin-left: 0;
margin-bottom: -16px;
}
/* Right Top */
.tooltip-right-top:after {
margin-bottom: 0;
bottom: -12px;
}
rhtml:
<thead>
<tr style="height:60px;">
<th width="15%">
<span class='tooltip-right' data-tooltip ="aaaaa" >
<%= link_to_remote("Name",:url => {:controller => "ww", :action => "dd"}) %>
</span>
</th>
</tr>
</thead>
Vielen Dank im Voraus.
das funktioniert gut. aber die Bilder auf dieser Seite sind statisch.
Sie kann auch "position: absolute" auf die Bilder anwenden. Sie werden in Bezug auf die Tooltips ausgerichtet. Geben Sie den Bildern einen höheren 'Z-Index', damit sie oben im Tooltip angezeigt werden. – nashcheez