Link URL tooltips

.gitignore

@@ -1,3 +1,4 @@
 build
 .cache
-imgui.ini
+imgui.ini
+.DS_Store

build_example.sh

@@ -1,4 +1,4 @@
 #!/bin/bash
 
-cmake -B build -DCMAKE_BUILD_TYPE=Release
-cmake --build build
+cmake -B build -DCMAKE_BUILD_TYPE=Release -DCMAKE_POLICY_VERSION_MINIMUM=3.5
+cmake --build build

examples/hello_world.html

@@ -26,8 +26,8 @@ <h1>ImHTML Example ({clicks} clicks)</h1>
         <div style="display: flex">
             <div style="margin-right: 15px">
                 <h2>Text</h2>
-                <p style="line-height: 1.2">
-                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
+                <p style="line-height: 1.2; font-family: monospace">
+                    <b tooltip="https://en.wikipedia.org/wiki/Lorem_ipsum">Lorem ipsum</b> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
                     erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
                     sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
                     invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
@@ -36,7 +36,7 @@ <h2>Text</h2>
                 <h2>Background Color &amp; Border</h2>
                 <div style="border: 3px solid red; background-color: green; padding: 30px">Box Test</div>
                 <h2>Links</h2>
-                <a href="https://github.com/">GitHub</a>
+                <a tooltip="Hello, world!" href="https://github.com/">GitHub</a>
                 <h2>Flexbox</h2>
                 <div style="display: flex; flex-direction: row">
                     <div style="flex: 1; background-color: red; padding: 10px">1</div>
@@ -46,7 +46,7 @@ <h2>Flexbox</h2>
             </div>
             <div>
                 <h2>Image</h2>
-                <img src="./images/example.jpg" style="width: 100%" />
+                <img src="./images/example.jpg" alt="./images/example.jpg" style="width: 100%" />
                 <h2>Lists</h2>
                 <ul>
                     <li>Item 1</li>

imhtml.cpp

@@ -143,6 +143,7 @@ class BrowserContainer : public litehtml::document_container {
  private:
   ImVec2 bottomRight = ImVec2(0, 0);
   std::string title = "Browser";
+  std::string tooltip = "";
   std::string loadUrl = "";
   std::string currentUrl = "";
   std::vector<std::string> history = {};
@@ -158,6 +159,7 @@ class BrowserContainer : public litehtml::document_container {
     bottomRight.x = std::max(bottomRight.x, point.x);
     bottomRight.y = std::max(bottomRight.y, point.y);
   }
+  std::string get_tooltip() { return tooltip; }
   std::string get_title() { return title; }
   std::string pop_load_url() {
     if (loadUrl.empty()) {
@@ -211,6 +213,11 @@ class BrowserContainer : public litehtml::document_container {
     }
 
     ImFont* font = resolveFont(config, descr.family, font_style);
+    if (font != nullptr) {
+      IMHTML_PRINTF("[ImHTML] Resolved font for weight=%i style=%i\n", static_cast<int>(descr.weight), static_cast<int>(descr.style));
+    } else {
+      IMHTML_PRINTF("[ImHTML] Failed to resolve font\n");
+    }
 
     auto rf = std::make_unique<ResolvedFont>();
     rf->Font = font;
@@ -895,7 +902,27 @@ class BrowserContainer : public litehtml::document_container {
   }
 
   virtual void on_mouse_event(const litehtml::element::ptr& el, litehtml::mouse_event event) override {
-    // TODO
+    if (el != nullptr && ImGui::IsWindowHovered()) {
+      const char* attr = el->get_attr("tooltip");
+      if (event == litehtml::mouse_event_enter) {
+        if (attr != nullptr) {
+          tooltip = std::string(attr);
+        } else {
+          const char* tag = el->get_tagName();
+          if (tag != nullptr) {
+            if (config.AllowHrefTooltips && std::string(tag) == "a" && (attr = el->get_attr("href")) != nullptr) {
+              tooltip = std::string(attr);
+            } else if (config.AllowImgAltTooltips && std::string(tag) == "img" && (attr = el->get_attr("alt")) != nullptr) {
+              tooltip = std::string(attr);
+            }
+          }
+        }
+      } else if (event == litehtml::mouse_event_leave) {
+        tooltip = "";
+      }
+    } else {
+      tooltip = "";
+    }
   }
 
   virtual void draw_borders(litehtml::uint_ptr hdc, const litehtml::borders& borders,
@@ -1135,6 +1162,10 @@ bool Canvas(const char* id, const char* html, float width, std::string* clickedU
   ImGui::ItemSize(bb.GetSize());
   ImGui::ItemAdd(bb, ImGui::GetID(id));
 
+  if (!state.container->get_tooltip().empty()) {
+    ImGui::SetTooltip("%s", state.container->get_tooltip().c_str());
+  }
+
   if (std::string url = state.container->pop_load_url(); !url.empty()) {
     if (clickedURL) {
       *clickedURL = url;

imhtml.hpp

@@ -41,6 +41,9 @@ struct FontFamily {
  * Configuration for the HTML renderer
  */
 struct Config {
+  bool AllowHrefTooltips = true;
+  bool AllowImgAltTooltips = true;
+
   float BaseFontSize = 16.0f;
 
   // fallback when not found in FontFamilies, or no specific family provided

main.cpp

@@ -82,7 +82,7 @@ static std::string ReplaceAll(std::string str, const std::string &from, const st
 }
 
 // Main code
-int main(int, char **) {
+int main(int argc, char **argv) {
   glfwSetErrorCallback(GlfwErrorCallback);
   if (!glfwInit()) return 1;
 
@@ -138,6 +138,12 @@ int main(int, char **) {
   ImGui::StyleColorsLight();
 
   ImHTML::Config *config = ImHTML::GetConfig();
+  if (argc > 1) {
+    if (atoi(argv[1]) == 0) {
+      config->AllowHrefTooltips = false;
+      config->AllowImgAltTooltips = false;
+    }
+  }
 
   std::unordered_map<std::string, std::tuple<GLuint, ImHTML::ImageMeta>> image_cache;
 
@@ -175,10 +181,12 @@ int main(int, char **) {
   fonts->AddFontDefault();
   ImFont *sans_font = fonts->AddFontFromFileTTF("fonts/NotoSans-Regular.ttf", 18.0f);
   ImFont *mono_font = fonts->AddFontFromFileTTF("fonts/JetBrainsMono-Regular.ttf", 18.0f);
+  ImFont *sans_font_bold = fonts->AddFontFromFileTTF("fonts/NotoSans-Bold.ttf", 22.0f);
+  ImFont *mono_font_bold = fonts->AddFontFromFileTTF("fonts/JetBrainsMono-Bold.ttf", 22.0f);
 
-  ImHTML::FontFamily mono = {.Regular = mono_font, .Bold = mono_font, .Italic = mono_font, .BoldItalic = mono_font};
+  ImHTML::FontFamily mono = {.Regular = mono_font, .Bold = mono_font_bold, .Italic = mono_font, .BoldItalic = mono_font_bold};
   config->FontFamilies["monospace"] = mono;
-  ImHTML::FontFamily sans = {.Regular = sans_font, .Bold = sans_font, .Italic = sans_font, .BoldItalic = sans_font};
+  ImHTML::FontFamily sans = {.Regular = sans_font, .Bold = sans_font_bold, .Italic = sans_font, .BoldItalic = sans_font_bold};
   config->FontFamilies["sans-serif"] = sans;
 
   // Setup scaling