Implemented issue#536 - Tooltip in forms is not shown / only on hover / not no click.

This commit is contained in:
Martin Edenhofer 2016-12-13 14:55:10 +01:00
parent fa8bf6e65f
commit d6ee7025ab
4 changed files with 22 additions and 15 deletions

View file

@ -108,7 +108,7 @@ class App.ControllerForm extends App.Controller
if @fullForm if @fullForm
if !@formClass if !@formClass
@formClass = '' @formClass = ''
fieldset = $('<form class="' + @formClass + '" autocomplete="off"><button class="btn">' + App.i18n.translateContent('Submit') + '</button></form>').prepend( fieldset ) fieldset = $('<form class="' + @formClass + '" autocomplete="off"><button class="btn">' + App.i18n.translateContent('Submit') + '</button></form>').prepend(fieldset)
# bind form events # bind form events
if @events if @events
@ -117,8 +117,11 @@ class App.ControllerForm extends App.Controller
evs = eventSelector.split(' ') evs = eventSelector.split(' ')
fieldset.find( evs[1] ).bind( evs[0], (e) -> callback(e) ) fieldset.find( evs[1] ).bind( evs[0], (e) -> callback(e) )
# bind tool tips
fieldset.find('.js-helpMessage').tooltip()
# return form # return form
return fieldset fieldset
### ###

View file

@ -60,7 +60,7 @@ class Index extends App.ControllerSubContent
new App.ControllerGenericNew( new App.ControllerGenericNew(
pageData: pageData:
title: 'SLAs' title: 'SLAs'
object: 'Sla' object: 'SLA'
objects: 'SLAs' objects: 'SLAs'
genericObject: 'Sla' genericObject: 'Sla'
container: @el.closest('.content') container: @el.closest('.content')

View file

@ -1,6 +1,6 @@
<div class="<%= @attribute.tag %> form-group<%= " #{ @attribute.item_class }" if @attribute.item_class %>"> <div class="<%= @attribute.tag %> form-group<%= " #{ @attribute.item_class }" if @attribute.item_class %>">
<div class="formGroup-label"> <div class="formGroup-label">
<label for="<%= @attribute.id %>"<% if @attribute.label_class: %> class="<%= @attribute.label_class %>"<% end %>><%- @T( @attribute.display ) %> <span><% if !@attribute.null: %>*<% end %></span></label> <label for="<%= @attribute.id %>"<% if @attribute.label_class: %> class="<%= @attribute.label_class %>"<% end %>><%- @T(@attribute.display) %> <span><% if !@attribute.null: %>*<% end %></span></label>
<%- @item %> <%- @item %>
<% if @bookmarkable: %> <% if @bookmarkable: %>
<div class="align-right js-bookmark formGroup-bookmark"> <div class="align-right js-bookmark formGroup-bookmark">
@ -8,7 +8,7 @@
</div> </div>
<% end %> <% end %>
<% if @attribute.note: %> <% if @attribute.note: %>
<div class="help-message" title="<%- @Ti( @attribute.note ) + ' ' %>"> <div class="help-message js-helpMessage" title="<%- @Ti(@attribute.note) %>">
<%- @Icon('help') %> <%- @Icon('help') %>
</div> </div>
<% end %> <% end %>
@ -17,6 +17,6 @@
<% if @attribute.remove: %><span><a href="#" class="glyphicon glyphicon-minus"></a></span><% end %> <% if @attribute.remove: %><span><a href="#" class="glyphicon glyphicon-minus"></a></span><% end %>
<% if @attribute.add: %><span><a href="#" class="glyphicon glyphicon-plus"></a></span><% end %> <% if @attribute.add: %><span><a href="#" class="glyphicon glyphicon-plus"></a></span><% end %>
<span class="help-inline"></span> <span class="help-inline"></span>
<span class="help-block"><% if @attribute.help: %><%- @T( @attribute.help ) + ' ' %><% end %><%- @attribute.helpLink %></span> <span class="help-block"><% if @attribute.help: %><%- @T(@attribute.help) %><% end %><%- @attribute.helpLink %></span>
</div> </div>
</div> </div>

View file

@ -3684,6 +3684,10 @@ footer {
font-family: inherit; font-family: inherit;
} }
.tooltip-inner {
max-width: 400px;
}
.popover { .popover {
font-family: inherit; font-family: inherit;
width: 372px; width: 372px;
@ -7383,11 +7387,11 @@ output {
.action-flow { .action-flow {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
&.action-flow--noWrap { &.action-flow--noWrap {
flex-wrap: nowrap; flex-wrap: nowrap;
} }
&.action-flow--row { &.action-flow--row {
flex-basis: 100%; flex-basis: 100%;
} }
@ -7403,7 +7407,7 @@ output {
margin-left: -9px; margin-left: -9px;
margin-right: -9px; margin-right: -9px;
} }
h2 { h2 {
margin-bottom: 0; margin-bottom: 0;
} }
@ -7412,7 +7416,7 @@ output {
.action-controls, .action-controls,
.action-row { .action-row {
padding: 10px; padding: 10px;
h2:first-child, h2:first-child,
h3:first-child { h3:first-child {
margin-top: 0; margin-top: 0;
@ -7428,7 +7432,7 @@ output {
.action-row { .action-row {
flex-basis: 100%; flex-basis: 100%;
} }
h3 { h3 {
color: hsl(0,0%,60%); color: hsl(0,0%,60%);
margin-top: 0; margin-top: 0;
@ -7446,7 +7450,7 @@ output {
color: hsl(197,16%,65%); color: hsl(197,16%,65%);
cursor: default; cursor: default;
} }
.action-flow-icon { .action-flow-icon {
width: 15px; width: 15px;
height: 24px; height: 24px;
@ -7460,15 +7464,15 @@ output {
display: flex; display: flex;
margin-left: auto; margin-left: auto;
align-self: flex-end; align-self: flex-end;
.btn { .btn {
align-self: center; align-self: center;
} }
} }
} }
/* /*
datepicker resets some css it potentially inherits when its rendered inside a table datepicker resets some css it potentially inherits when its rendered inside a table
*/ */