Search code examples
tooltiphaml

Html in Title attribute of an element for tooltip in HAML

I am working on an application which is developed in ruby and haml, now I need to show tooltip on elements and tooltip will contain image as well so this tooltip will be an HTML.

my html sctructure for tooltip is like

<li><a href="www.example.com" class='empty-space-tooltip' title='<img src="images/info.png" width="300" height="150" alt="Info" />'>
    <img src="images/info.png" width="16" height="16" alt="Info" /></a>
    <a href="www.example.com" class="main-link" title='<img src="images/info.png" width="300" height="150" alt="Info" />'><span>Title</span></a></li>

How to write in in HAML I am trying following code

%li 
   %a{:href => "#/", :title => '%img{alt: "", height: "150", src: "images/info.png", width: "300"}/'} Send
   %a{:href => "#/", :title => '%img{alt: "", height: "150", src: "images/info.png", width: "300"}/'} Title
Solution

  • Using htmltohaml.com and removing all backslashes:

    %li
  %a.empty-space-tooltip{:href => "www.example.com", :title => "<img src="images/info.png" width="300" height="150" alt="Info" />"}
    %img{:alt => "Info", :height => "16", :src => "images/info.png", :width => "16"}/
  %a.main-link{:href => "www.example.com", :title => "<img src="images/info.png" width="300" height="150" alt="Info" />"}
    %span Title