Créer un popup javascript dans la fonction de Rails link_to call

Question

J'essaie de créer un widget popup javascript standard pour fournir des indices dans mon application Rails. J'espère pouvoir créer un seul widget contextuel où les informations contenues à l'intérieur changeront chaque fois que l'on clique sur différents boutons d'indices. Tous les exemples que j'ai l'air de trouver utilisent le javascript onclick, mais cela ne me permettra pas de transmettre des valeurs de texte différentes en fonction du bouton sur lequel on a cliqué. En outre, je continue à voir la popup en cours de création en utilisant html plutôt que d'être fait dans le javascript.

Cela fonctionne pour appeler une fonction javascript

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

Mais je dois savoir comment créer un widget pop-up de la fonction appelée, comme

function hint_widget(hint_text) { create_popup_widget } 

Peut-être quelque chose comme ça?

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

C'était la meilleure solution que j'ai trouvée, mais il y a peut-être de meilleures solutions. Je suis ouvert pour tout conseil/suggestion

Answer 1

Voici les bases de la façon dont vous commenceriez à construire un système d'infobulles - mais il y en a déjà des milliers, il n'est donc pas logique d'en écrire un à moins de le faire apprendre.

$(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>

• http://foundation.zurb.com/sites/docs/v/5.5.3/components/tooltips.html
• http://getbootstrap.com/javascript/#tooltips
• https://jqueryui.com/tooltip/