shaba/one
1
0
Fork 0
mirror of https://github.com/OpenNebula/one.git synced 2025-03-22 18:50:08 +03:00
Code Releases Wiki Activity

B #5534: Fix Sunstone tooltips (#1669)

Browse Source
This commit is contained in:
Frederick Borges 2021-12-14 12:15:18 +01:00 committed by GitHub
parent 545f5e550f
commit 1deb13bd45
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 34 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/sunstone/public/app/utils/tips.js
View File

@ -14,8 +14,7 @@
/* limitations under the License. */
/* -------------------------------------------------------------------------- */
define(function(require) {
// require('foundation.tooltip');
define(function(require) {
//Replaces all class"tip" divs with an information icon that
//displays the tip information on mouseover.
var _setup = function(context, position) {
@ -31,21 +30,16 @@ define(function(require) {
obj.removeClass('tip');
var tip = obj.html();
var tip_classes = ['has-tip']
if (position) {
tip_classes.push(position)
}
//replace the text with an icon and spans
//obj.html('<span data-tooltip class="' + tip_classes.join(' ') + '" data-width="210" title="' + tip + '"><i class="fas fa-question-circle"></i></span>');
obj.html('<span data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" title="' + $.trim(tip) + '"><i class="fas fa-question-circle"></i></span>');
obj.html(_html(tip));
});
Foundation.reflow(context, 'tooltip');
}
var _html = function(str) {
//return '<span data-tooltip class="" data-width="210" title="' + str + '"><i class="fas fa-question-circle"></i></span>'
return '<span data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" title="' + $.trim(str) + '"><i class="fas fa-question-circle"></i></span>';
var _html = function(tip) {
var html = '<div class="opennebula-tooltip">' +
'<i class="fas fa-question-circle"></i>' +
'<span class="opennebula-tooltiptext">' + $.trim(tip) + '</span>' +
'</div>';
return html;
}
return {

26
src/sunstone/public/scss/_tooltips.scss
View File

@ -4,4 +4,30 @@
.fa-question-circle {
color: $medium-gray;
}
/* Tooltip container */
.opennebula-tooltip {
position: relative;
display: inline-block;
}
/* Tooltip text */
.opennebula-tooltip .opennebula-tooltiptext {
visibility: hidden;
width: 15em;
background-color: $bold-black;
color: $white;
text-align: center;
padding: 5px;
border-radius: 6px;
position: absolute;
z-index: 1;
font-size: $helptext-font-size;
font-weight: bold;
}
/* Show the tooltip text when you mouse over the tooltip container */
.opennebula-tooltip:hover .opennebula-tooltiptext {
visibility: visible;
}