felixhageloh

<% with_tooltip "I am a tooltip!" do %>
    some html or plain text here ...
<% end -%>

felixhageloh

<% with_tooltip "Click to see me!", :event => :click do %>
  some html or plain text here ...
<% end -%>

felixhageloh

def with_tooltip(tool_tip_text, options={}, &block)
  content = capture(&block)
  opts = tag_options(options[:html]);

  uid = "tooltipjs_#{get_uid}"

  js = %{
    var parent = $('#{uid}').up();
    var trigger = parent.getElementsByClassName('TooltipTrigger')[0] || parent;
    var tooltip = parent.getElementsByClassName('Tooltip')[0];

felixhageloh

function showTooltip(tooltip) {
  tooltip = $(tooltip);
  tooltip.setStyle({zIndex: -1});
  tooltip.show();
  tooltip.setStyle({top: "-"+(tooltip.offsetHeight)+"px"});
  tooltip.setStyle({zIndex: 100});
}

felixhageloh

.Tooltip {
  background: transparent url(/images/dark-pointer.png) no-repeat scroll 10px bottom;
  font-size: 10px;
  line-height: 12px;
  margin-left: -5px;
  padding: 0 5px;
  position: absolute;
  z-index: 100;
  left: 0;
}

felixhageloh

<% with_tooltip "I am a tooltip" do %>
  The tooltip will appear for this entire section, but only when hovered over
  <span class="TooltipTrigger">this element</span>
<% end -%>

felixhageloh

command: "echo Hello World!",

refreshFrequency: 5000,

render: function (output) {
  return "<div><h1>" + output + "</h1></div>";
},

style: "        \n\
  top: 20px     \n\

felixhageloh

command: "echo blurz"

refreshFrequency: 1000000000

style: """
  top: 30%
  left: 50%
  width: 200px
  height: 125px
  margin-left: -(@width / 2)

felixhageloh

colors =
  low    : "rgb(60, 160, 189)"
  normal : "rgb(88, 189, 60)"
  high   : "rgb(243, 255, 134)"
  higher : "rgb(255, 168, 80)"
  highest: "rgb(255, 71, 71)"

settings:
  background: true
  color     : true

felixhageloh

command: "top -R -l2 | grep 'CPU usage' | tail -n1 | awk '{ print $3+$5 }'"

refreshFrequency: 1000

style: """
  top: 50%
  left: 80%
  width: 208px
  margin: 0 0 0 -104px
  text-align: left