Guide on incorporating clickable hyperlinks in Foundation tooltip

Currently, I am facing an issue with a header tag that has Foundation's tooltip attached to it as per the documentation. The problem is, I want the tooltip to be clickable so that I can display a modal on click, but every time I move away from the div the tooltip is connected to, it disappears.

I have tried using jQuery methods like .hide() and .show() to manipulate the element but without success. How can I make sure the tooltip stays visible when I need it to? Thanks!

<h5 data-tooltip aria-haspopup="true" class="has-tip" title="<a>Click here</a>">Hover for tooltip</h5>
jqueryhtmlcsszurb-foundationfrontend

Answer №1

If you are looking for a solution, check out this jsFiddle that addresses your needs:

To make it work, I included the attributes: data-allow-html="true" and data-disable-hover="true". Then, I managed the display and hiding of the pop-ups manually in the following way:

$("body").on("mouseenter", ".has-tip", function() {
    $(this).foundation("show");
});

$("body").on("mouseleave", ".tooltip", function() {
    $(this).siblings(".has-tip").first().foundation("hide");
});

This example may be basic, but it will give you a starting point to work from.

Answer №2

Discover the solution provided at this link. Essentially, instead of calling the .tooltip() method on the target directly, you can include the options as a JSON object.

    function implementCustomTooltip(target, content){
    $( target ).tooltip({
        show: null, // display instantly 
        position: { my: "right top", at: "left top" },
        content: content, //from parameters
        hide: { effect: "" }, // fadeOut
        close: function(event, ui){
            ui.tooltip.hover(
                function () {
                    $(this).stop(true).fadeTo(400, 1); 
                },
                function () {
                    $(this).fadeOut("400", function(){
                        $(this).remove(); 
                    })
                }
            );
        }  
    });
}

$(document).ready(function(){
    implementCustomTooltip('#t1', "some basic information");
    implementCustomTooltip(
        '#t2',
        'different details with <a href="http://abbysdoor.com">link</a> :)'
    );
});

Credit goes to Abby Langer for this solution.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

showing a fading-in effect after a successful AJAX post

Maybe a simple question, but I've been struggling to make this work for quite some time now. Despite trying various solutions from stackoverflow, I can't seem to get it right. Perhaps fresh eyes could help me figure out how to achieve this. My g ...

javascriptjqueryajax

I'm looking for a solution to implement a vertical carousel in Google's Materialize CSS without the need for custom development

Looking to create a unique vertical scrolling "carousel" using Google's Materialize CSS library. I have a good understanding of the steps required to construct a carousel. # haml %ul.carousel %li.carousel-item Some Content %li.carousel-item ...

javascriptjqueryhtmlcssmaterialize

Can you explain the meaning of the selector "$("link#theme")"?

I've been exploring a website template recently. I noticed that when a user clicks on a link, it triggers a JavaScript function that executes this command to switch the site's theme: $('link#theme').attr('href', 'theme2 ...

javascriptjquerydom

Centering an item within a dropdown navigation bar

Hey there, I'm currently facing a challenge with centering an image within my dropdown bar. My goal is to have it float to the right and be centered, but it's not cooperating. Here's the code snippet I'm working with: <!DOCTYPE htm ...

htmlcss

Utilizing Jquery queue for running a series of Ajax requests; imperative to clear the queue in case of a failed request

I am currently working on creating a queue of ajax calls that need to be executed in order. The process seems to be functioning properly, but I am encountering an issue when there is an error in one of the calls. My goal is to stop the queue after an error ...

jqueryajaxqueue

What is the best way to swap out text for an image in CSS?

I came across a website that I am working on: The site features a slider with 2 tabs named "TAB1" and "tab2" My goal is to replace the text with unique images for each tab Below is the CSS code snippet: .dnd-tabs.dnd-tabs-style1 .ui-tabs-nav li.ui-tabs ...

htmlcss

Converting an HTML page into a JSON object by scraping it

Is there a way to convert an HTML page into a JSON object using web scraping? Here is the content of the page: <html><head><title>Index</title><meta charset="UTF-8"></head><body><div><p>[ <a href ...

javascripthtmljsonnode.js

Concealing inactive select choices on Internet Explorer versions greater than 11 with the help of AngularJS

I am having trouble hiding the disabled options in AngularJS specifically for IE. Check out this fiddle for a better idea: https://jsfiddle.net/s723gqo1/1/ While I have CSS code that works for hiding disabled options in Chrome/Firefox, it doesn't see ...

htmlcssangularjsselectdrop-down-menu

Looking to minimize the amount of HTML code in Angularjs by utilizing ng-repeat

Working with some HTML <tr class="matrix_row" ng-repeat="process in matrixCtrl.processes | filter : { park: parentIndex } track by $index"> <td class="properties" ng-click="dashboardCtrl.currParam=0; dashboardCtrl.currentProcess=process"> ...

javascripthtmlangularjsangularjs-ng-repeat

Current recommended method for updating innerHTML with properly formatted text?

My understanding is that using innerHTML on an element can be risky, as malicious users could potentially inject harmful content such as <script> tags. This question shows there are multiple alternative tags, some of which are non-standard. In my s ...

javascripthtml

Looking to create a clone of an HTML element, make some modifications, and extract the HTML string without impacting the DOM?

After working with some HTML code, I encountered the following: <div style="background:red;width:900px;height:200px" id="wrap"> <div id="inner" style="width:300px;float:left"> ... </div> </div> The tasks at hand are ...

javascriptjquerydom

How can we prevent the HTML escaping of text children in React.createElement?

Let's examine the call to React.createElement: React.createElement('span', null, null, ['&gt;&lt;',]) When executing this code, React will escape the characters &gt; and &lt;. Is there a method to prevent these sp ...

htmlreactjshtml-escape-characters

Storing a variable in jQuery using AJAX and retrieving it at a later time

Hey there! I'm currently using jQuery and AJAX to fetch the user ID of the logged-in user. I'm storing this information in a variable so that I can use it for some logic later on. However, I'm facing issues with accessing it. Here's my ...

javascriptjqueryajaxglobal-variables

The functionality of @Output and custom events appears to be malfunctioning

I am a beginner in Angular and attempting to pass data between child and parent components. In the child component.ts file: @Output() doubleClick = new EventEmitter<string>(); onDoubleClick(nameAccount: string){ this.doubleClick.emit(nameAccoun ...

htmlangulareventsbinding

What is the best way to assign both first and last names to an array with keys and values, then showcase the result?

<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8> <title>practice session</title> </head> <body> <!-- $name1 = first--> <!-- $name2 = last--> <?php echo " ...

phphtml

Issue with transition on the second attempt

In this code snippet, I have managed to achieve my desired outcome but it seems to only work on the first run. I am not sure why this is happening, so if anyone can help me out that would be greatly appreciated. Here is a demo of the code in action: HTML ...

jqueryhtmlcss

What is the best way to emphasize the current page within my Bootstrap <nav> menu?

Below is the Bootstrap code that defines our main menu navigation: <div class="col-xl-9 col-lg-9"> <div class="main-menu d-none d-lg-block"> <nav> ...

javascripthtmljquerycsstwitter-bootstrap

The contrast between using the `$("selector").find` method and the `$("selector").contents().find()` method in jQuery

When it comes to navigation, I have developed two methods that involve obtaining the elements' offsets: $("#selector").contents().find('#'+list1).each(function(){ var offset= $(this).offset(); }); $("#selector").find('#&apos ...

jqueryhtml

How can I alter the div once the form has been submitted?

Is there a way to change the background of a form and its results after submitting the form? I need to switch the image background to a plain color. I attempted to use a solution I found, but it doesn't seem to be working as expected. You can view my ...

javascriptjqueryhtmlcssforms

Create dynamic transitions for hidden elements using a special technique

Is it possible to smoothly transition a div element from display:none to display:block? I attempted to first set the display to block and then apply a transition, but it doesn't seem to be working as expected. HTML <input type="text" class="inp"& ...

javascriptjquery