在 Rails link_to 调用的函数中创建 javascript 弹出窗口答案

【问题标题】：Create javascript popup in function from Rails link_to call在 Rails link_to 调用的函数中创建 javascript 弹出窗口
【发布时间】：2016-02-24 17:58:53
【问题描述】：

我正在尝试创建一个标准的 javascript 弹出窗口小部件，以在我的 Rails 应用程序中提供提示。我希望能够创建一个弹出窗口小部件，只要单击不同的提示按钮，其中包含的信息就会发生变化。我似乎找到的所有示例都使用 javascript onclick，但这不允许我根据单击的按钮传递不同的文本值。此外，我一直看到弹出窗口是使用 html 创建的，而不是在 javascript 中完成的。

这正在调用一个javascript函数

<%= f.label :name %><%= link_to image_tag("hint_link.jpeg", :size=>"13x13"), '#', :onclick => 'create_hint_widget("a"); return false;' %>

但我需要知道如何从被调用的函数中创建一个弹出窗口小部件，如

function hint_widget(hint_text) { create_popup_widget }

也许是这样的？

$( "#draggable" ).draggable().html("<div id='draggable' class='ui-widget-content'><p>hint_text</p></div>");

这是我能想到的最佳解决方案，但可能还有更好的解决方案。我愿意接受任何建议/建议

【问题讨论】：

标签： javascript ruby-on-rails popup widget link-to

【解决方案1】：

这是您将如何开始构建工具提示系统的基础知识 - 但是已经有数以千计的工具提示系统可用，因此除非您是为了学习，否则编写一个没有多大意义。

$(function(){

  # delegate a handler to elements that have a `data-tooltip` attribute.
  $(document).on('click', 'a[data-tooltip]', function(){
    var $el = $(this)
    var $tooltip = $('<div class="tooltip-overlay">').text($el.data('tooltip'));
    $el.append($tooltip);
    # fade out and remove tooltip after 3s
    $tooltip.delay(3000).fadeOut(100).remove();
    return false;
  });
  
  # handle when user clicks a tooltip
  $(document).on('click', '.tooltip-overlay', function(){
    $(this).remove();
    return false;
  });
});

a[data-tooltip] {
  position: relative;
  display: inline-block;
}

.tooltip-overlay {
  position: absolute;
  background-color: yellow;
  border: 1px solid black;
  top: -140%;
  padding: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 
<p><a href="#">Link without tooltip</a></p>
<p><a href="#" data-tooltip="Sample text" class="tooltip">Link with tooltip</a></p>

【讨论】：