Commit fffd82fa authored by Bas Lijnse's avatar Bas Lijnse

Merge branch '296-tooltips-of-icons-do-not-work' into 'master'

Use data attribute for tooltips, since it is not a valid HTML attribute

Closes #296

See merge request !263
parents b6bcc61e c8c90f57
Pipeline #23405 passed with stage
in 5 minutes and 15 seconds
......@@ -241,11 +241,11 @@ div.itasks-exception {
*.itasks-viewport .icon-fullscreen {
background-image: url("/css/icons/fullscreen.png") !important;
}
*.itasks-viewport [tooltip] {
*.itasks-viewport [data-tooltip] {
position: relative;
display: inline-block;
}
*.itasks-viewport [tooltip]:before, *.itasks-viewport [tooltip]:after {
*.itasks-viewport [data-tooltip]:before, *.itasks-viewport [data-tooltip]:after {
position: absolute;
transform: translate3d(0, 0, 0);
visibility: hidden;
......@@ -254,19 +254,19 @@ div.itasks-exception {
pointer-events: none;
transition: 0.3s ease;
}
*.itasks-viewport [tooltip]:hover:before, *.itasks-viewport [tooltip]:hover:after, *.itasks-viewport [tooltip]:focus:before, *.itasks-viewport [tooltip]:focus:after {
*.itasks-viewport [data-tooltip]:hover:before, *.itasks-viewport [data-tooltip]:hover:after, *.itasks-viewport [data-tooltip]:focus:before, *.itasks-viewport [data-tooltip]:focus:after {
visibility: visible;
opacity: 1;
}
*.itasks-viewport [tooltip]:before {
*.itasks-viewport [data-tooltip]:before {
content: "";
position: absolute;
background: transparent;
border: 6px solid transparent;
z-index: 1000001;
}
*.itasks-viewport [tooltip]:after {
content: attr(tooltip);
*.itasks-viewport [data-tooltip]:after {
content: attr(data-tooltip);
background: #ccc;
color: #000;
padding: 8px 10px;
......@@ -275,19 +275,19 @@ div.itasks-exception {
white-space: nowrap;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
}
*.itasks-viewport [tooltip]:before {
*.itasks-viewport [data-tooltip]:before {
border-left-color: #ccc;
margin-right: -12px;
margin-bottom: -6px;
}
*.itasks-viewport [tooltip]:after {
*.itasks-viewport [data-tooltip]:after {
margin-bottom: -14px;
}
*.itasks-viewport [tooltip]:before, *.itasks-viewport [tooltip]:after {
*.itasks-viewport [data-tooltip]:before, *.itasks-viewport [data-tooltip]:after {
right: 100%;
bottom: 50%;
}
*.itasks-viewport [tooltip]:hover:after, *.itasks-viewport [tooltip]:hover:before, *.itasks-viewport [tooltip]:focus:after, *.itasks-viewport [tooltip]:focus:before {
*.itasks-viewport [data-tooltip]:hover:after, *.itasks-viewport [data-tooltip]:hover:before, *.itasks-viewport [data-tooltip]:focus:after, *.itasks-viewport [data-tooltip]:focus:before {
transform: translateX(-8px);
}
......
......@@ -241,11 +241,11 @@ div.itasks-exception {
*.itasks-viewport .icon-fullscreen {
background-image: url("/css/icons/fullscreen.png") !important;
}
*.itasks-viewport [tooltip] {
*.itasks-viewport [data-tooltip] {
position: relative;
display: inline-block;
}
*.itasks-viewport [tooltip]:before, *.itasks-viewport [tooltip]:after {
*.itasks-viewport [data-tooltip]:before, *.itasks-viewport [data-tooltip]:after {
position: absolute;
transform: translate3d(0, 0, 0);
visibility: hidden;
......@@ -254,19 +254,19 @@ div.itasks-exception {
pointer-events: none;
transition: 0.3s ease;
}
*.itasks-viewport [tooltip]:hover:before, *.itasks-viewport [tooltip]:hover:after, *.itasks-viewport [tooltip]:focus:before, *.itasks-viewport [tooltip]:focus:after {
*.itasks-viewport [data-tooltip]:hover:before, *.itasks-viewport [data-tooltip]:hover:after, *.itasks-viewport [data-tooltip]:focus:before, *.itasks-viewport [data-tooltip]:focus:after {
visibility: visible;
opacity: 1;
}
*.itasks-viewport [tooltip]:before {
*.itasks-viewport [data-tooltip]:before {
content: "";
position: absolute;
background: transparent;
border: 6px solid transparent;
z-index: 1000001;
}
*.itasks-viewport [tooltip]:after {
content: attr(tooltip);
*.itasks-viewport [data-tooltip]:after {
content: attr(data-tooltip);
background: #ccc;
color: #000;
padding: 8px 10px;
......@@ -275,19 +275,19 @@ div.itasks-exception {
white-space: nowrap;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
}
*.itasks-viewport [tooltip]:before {
*.itasks-viewport [data-tooltip]:before {
border-left-color: #ccc;
margin-right: -12px;
margin-bottom: -6px;
}
*.itasks-viewport [tooltip]:after {
*.itasks-viewport [data-tooltip]:after {
margin-bottom: -14px;
}
*.itasks-viewport [tooltip]:before, *.itasks-viewport [tooltip]:after {
*.itasks-viewport [data-tooltip]:before, *.itasks-viewport [data-tooltip]:after {
right: 100%;
bottom: 50%;
}
*.itasks-viewport [tooltip]:hover:after, *.itasks-viewport [tooltip]:hover:before, *.itasks-viewport [tooltip]:focus:after, *.itasks-viewport [tooltip]:focus:before {
*.itasks-viewport [data-tooltip]:hover:after, *.itasks-viewport [data-tooltip]:hover:before, *.itasks-viewport [data-tooltip]:focus:after, *.itasks-viewport [data-tooltip]:focus:before {
transform: translateX(-8px);
}
......
[tooltip] {
[data-tooltip] {
position: relative;
display: inline-block;
}
[tooltip]:before, [tooltip]:after {
[data-tooltip]:before, [data-tooltip]:after {
position: absolute;
transform: translate3d(0, 0, 0);
visibility: hidden;
......@@ -11,19 +11,19 @@
pointer-events: none;
transition: 0.3s ease;
}
[tooltip]:hover:before, [tooltip]:hover:after, [tooltip]:focus:before, [tooltip]:focus:after {
[data-tooltip]:hover:before, [data-tooltip]:hover:after, [data-tooltip]:focus:before, [data-tooltip]:focus:after {
visibility: visible;
opacity: 1;
}
[tooltip]:before {
[data-tooltip]:before {
content: '';
position: absolute;
background: transparent;
border: 6px solid transparent;
z-index: 1000001;
}
[tooltip]:after {
content: attr(tooltip);
[data-tooltip]:after {
content: attr(data-tooltip);
background: #ccc;
color: #000;
padding: 8px 10px;
......@@ -32,18 +32,18 @@
white-space: nowrap;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
}
[tooltip]:before {
[data-tooltip]:before {
border-left-color: #ccc;
margin-right: -12px;
margin-bottom: -6px;
}
[tooltip]:after {
[data-tooltip]:after {
margin-bottom: -14px;
}
[tooltip]:before, [tooltip]:after {
[data-tooltip]:before, [data-tooltip]:after {
right: 100%;
bottom: 50%;
}
[tooltip]:hover:after, [tooltip]:hover:before, [tooltip]:focus:after, [tooltip]:focus:before {
[data-tooltip]:hover:after, [data-tooltip]:hover:before, [data-tooltip]:focus:after, [data-tooltip]:focus:before {
transform: translateX(-8px);
}
......@@ -426,9 +426,9 @@ itasks.Icon = {
me.currentIcon = me.attributes.iconCls;
if(me.attributes.tooltip) {
el.tooltip=me.attributes.tooltip;
el.dataset.tooltip=me.attributes.tooltip;
}
},
},
onAttributeChange: function(name,value) {
var me = this,
el = me.domEl;
......@@ -439,9 +439,8 @@ itasks.Icon = {
el.classList.add(me.currentIcon);
break;
case 'tooltip':
el.tooltip=value;
el.dataset.tooltip=value;
break;
}
}
};
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment