Unique hover tags such as those provided by Thinglink

Looking for a way to replicate the functionality of Thinglink?

Imagine a dot on an image that, when hovered over, displays a text box - that's what I'm trying to achieve.

I thought about using tooltips in Bootstrap, but I'm not sure if it can be done on an image...

UPDATE:

Here's my current code snippet:

<div class="col-md-4 column wow fadeInRight delay=1000ms">
    <div id="tooltip1" data-toggle="tooltip" data-placement="top" title="keyword1">
        <div id="tooltip2" data-toggle="tooltip" data-placement="left" title="keyword2">
            <div id="tooltip3" data-toggle="tooltip" data-placement="bottom" title="keyword3">
                <img src="img/IPHONE_SCREENSHOT.png" alt="iOS" />
            </div
        </div>
    </div>
</div>

SOLUTION:

Credit goes to @Wouter Florijn for this solution. I added Bootstrap tooltips and used transparent 16x16 images, as they are needed for the tooltips to work (can't hover in an empty zone...)

<img src="img/IPHONE_SCREENSHOT.png" alt="iOS" />
<div class="dot" data-x="20%" data-y="25%"><a href="#" rel="tooltip" title="Feature 1"><img src="img/dot_transparent.png"/></a></div>
<div class="dot" data-x="80%" data-y="50%"><a href="#" rel="tooltip" title="Feature 2"><img src="img/dot_transparent.png" /></a></div>
<div class="dot" data-x="35%" data-y="80%"><a href="#" rel="tooltip" title="Feature 3"><img src="img/dot_transparent.png" /></a></div>
<div class="dot" data-x="55%" data-y="15%"><a href="#" rel="tooltip" title="Feature 4"><img src="img/dot_transparent.png" /></a></div>
javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

For an effective display, create a container div for the image and then incorporate a series of absolutely positioned divs within that container.

To accurately position the dots on the image, utilizing JavaScript would be the optimal approach.

Subsequently, enhance the .dot divs by integrating tooltips, which can be achieved through various libraries such as jQuery UI, Bootstrap, Foundation, or your customized code.

View Example Here

HTML:

<div class="container">
    <img src="..." />
    <div class="dot" data-x="20%" data-y="25%"></div>
    <div class="dot" data-x="80%" data-y="50%"></div>
    <div class="dot" data-x="35%" data-y="80%"></div>
    <div class="dot" data-x="55%" data-y="15%"></div>
</div>

CSS:

.container {
    position: relative;
    max-width: 100%;
}
.container img {
    max-width: 100%;
}
.dot {
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: black;
    border: 8px solid white;
    border-radius: 99999px;
    cursor: pointer;
}
.dot:hover {
    background-color: white;
    border: 8px solid black;
}

JS:

$(document).ready(function() {
    $('.dot').each(function() {
        $(this).css('left', $(this).data('x'));
        $(this).css('top', $(this).data('y'));
    });
});

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

Having trouble retrieving information from a nested JSON array within a JSON object using JavaScript

I am facing a challenge with extracting specific information from a JSON object that contains an array nested inside. Even though I have experience working with JSON arrays, this particular object is proving to be tricky. For example, when attempting to r ...

javascriptarraysjson

Change the value of the checked property to modify the checked status

This is a miniCalculator project. In this mini calculator, I am trying to calculate the operation when the "calculate" button is pressed. However, in order for the calculations to run correctly in the operations.component.ts file, I need to toggle the val ...

javascriptangulartypescript

Display or conceal nested divs within ng-repeat loop

I set up a div with sub divs to establish a nested grid system. There are three levels altogether: MainDiv - Always Visible SecondDiv - Display or conceal when MainDiv is clicked on ThirdDiv - Display or conceal when SecondDiv is clicked on <div c ...

javascriptcssangularjsionic-framework

When attempting to access http://localhost:3000/traceur in Angular 2 with the angular-in-memory-web-api, a 404 (Not Found) error

Hello, I'm encountering an issue with angular-in-memory-web-api. I have attempted to use angular2-in-memory-web-api in SystemJS and other solutions, but without success. I am currently using the official quickstart template. Thank you for any assistan ...

javascriptapiangulartypescript

Detecting if the request in Yii Framework 2.0 is coming from an AJAX GET call

While utilizing Yii framework 2.0, I have implemented an AJAX GET jQuery script that references a function within a controller class. $.get('localhost/website/index', {param: 'xxxx'}, function(returnedData){ // some code here..... ...

javascriptphpjqueryajaxyii2

Looping through an array of nested objects using Vue

I have encountered a challenge with accessing specific data within an array that I am iterating over. The array is structured as follows, using Vue.js: companies: [ name: "company1" id: 1 type: "finance" additionalData: "{& ...

javascripttypescriptvue.jsobjectv-for

React Native encounters issues with removing the reference to the callback attribute upon unmounting

Utilizing a component that I place in an array (of various sizes) and controlling individual components through refs, while adding refs to an object to keep track of each separately. constructor(props){ super(props); this.stamps = []; this.get ...

javascriptreactjsreact-native

Encountering issues with returning values correctly when using module.exports in Node.js

function userLogin(username, password) { var status; var userid = username; User.findOne({ 'username': [userid], 'password': [password] }, function(err, user) { if (!user) { console.lo ...

javascriptnode.jsexpress

The div remains unchanged when the button is clicked

My webpage is filled with several large div elements. There's a button on the page that, when clicked, should switch to the next div. Despite my efforts, the code I've written doesn't seem to be working as expected. :( This is the HTML st ...

javascriptjquerycsshtml

Every time I enter npm start in the terminal, I consistently encounter this error

After developing a simple web app and posting it on my repository, I started encountering these persistent errors. npm ERR! code ELIFECYCLE – David 1 hour ago npm ERR! syscall spawn C:\Windows\system32\cmd.exe;C:\Users'usernam ...

javascriptreactjsnpm-start

Modifying the content in one form field based on the information entered in another input field

I have a scheduling application that includes a form for selecting both the departure city and arrival city. The app is designed for international travel only, so when a user selects a city from Hungary as the departure city, I want to exclude all Hungaria ...

javascriptformsvue.jsnuxt.js

Creating a hierarchical tree structure from tabular data with JavaScript ECMAScript 6

Seeking a JavaScript algorithm utilizing ECMAScript 6 features to efficiently convert JSON table data into a JSON tree structure. This approach should not employ the traditional recursive algorithm with ES5, but rather emphasize a functional programming me ...

javascriptjsonecmascript-6hierarchical-data

Is there a way to troubleshoot the issue pertaining to using routerLink in Angular version 17.2?

Currently working on a small app, but encountering an error with routerLink in the console. I am new to angular and seeking help. ✘ [ERROR] NG8002: Can't bind to 'routerLink' since it isn't a known property of 'a'. Here is ...

htmlangularrouterlink

Showing identification on the drop-down list

Within my dropdown menu setup, I am aiming to achieve a specific functionality. When the user clicks on sub menu, I want the title of sub menu to display in the Menu space as illustrated below. What steps can be taken to accomplish this? UPDATE: After fu ...

jquerycss

Modify the default background color for the chosen element in the tree structure

Could someone assist me in changing the default background color of a selected element in the tree? Below is the XHTML code: <style type="text/css"> .ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state- ...

cssprimefaces

Combining MarkDown elements into a DIV or a custom HTML tag

I have utilized the Jeykll tool to convert mark down content into HTML. I am looking to group the following mark down elements within a div element or another custom HTML tag. Markdown #Multiple Axis {:.title} Different types of data can be vis ...

htmlmarkdownjekyll

What are the limitations of using a JS file within an Angular application?

I am struggling to integrate some js methods from a file into an angular application. Unfortunately, the browser is unable to recognize the js file. I have tried following the guidelines in this SO post, but the browser still cannot locate the file in the ...

javascriptnode.jsangulartypescriptecmascript-6

Disabling 'Input Number' feature is ineffective in Firefox browser

Is there a way to prevent the input value from changing when the up or down arrow is held, even if the input is disabled? I want to retain the arrows without allowing this behavior on Firefox. Give it a try: Press the up arrow. After 5 seconds, the input ...

javascriptjqueryhtmlinput

Communication between Angular Controller and Nodejs Server for Data Exchange

Expanding on the solution provided in this thread, my goal is to implement a way to retrieve a response from the node server. Angular Controller $scope.loginUser = function() { $scope.statusMsg = 'Sending data to server...'; $http({ ...

javascriptangularjsnode.jsexpress

Sort an array by mapping it in decreasing order based on the total sum of its elements

I came across a JSON structure that looks like the following: { "user": [ {"username": "x1", "pfp": "", "scores": [{"easy": 10, "normal": 1, "hard": 2, "oni&q ...

javascriptnext.js