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

In Chrome, it seems like every alternate ajax request is dragging on for ten times longer than usual

I've been running into an issue with sending multiple http requests using JavaScript. In Chrome, the first request consistently takes around 30ms while the second request jumps up to 300ms. From then on, subsequent requests alternate between these two ...

javascriptajaxgoogle-chrome

`Arranging miniature images within tabbed sections`

I have been implementing angularjs to render my HTML and utilizing bootstrap 3 for styling. While the tabs are rendering correctly, I am facing an issue where the images within each tab are not displaying in a grid layout; instead, they are being outputt ...

htmlangularjstwitter-bootstraptwitter-bootstrap-3

Preventing Repeated Clicks in AngularJS

Looking for a better approach to handle double clicks in AngularJS other than using ng-disabled. I have a solution to disable double/multi-click functionality on button click and re-enable it after completing an ajax process. Any suggestions? When our cod ...

javascriptajaxangularjs

Using the "if else" statement in a jQuery AJAX response

I have an Ajax function that is functioning correctly, but I want to display a different message when the Ajax response is: <h3>No Couriers found near you. Please select another location.</h3> If I receive this specific response, I want to sh ...

phpjqueryajax

Using React Native to trigger a function upon receiving a notification

Can a function in javascript be executed in react native when receiving a remote notification? Will a remote notification trigger react native to run in the background? Alternatively, should this be handled with Swift/Objective-C instead? ...

javascriptiospush-notificationreact-nativeapple-push-notifications

Exploring the Spotify API with jQuery/ajax to fetch details about songs, artists, and albums

I've been researching and have come across some information that is somewhat similar, but I'm still struggling to completely understand how this process works. My goal is to make a request to the Spotify API using jQuery to search for an artist ...

jqueryjsonajaxspotify

Oxygen-style with a sleek, shadow-free frame

Currently, I'm utilizing the qtoxygen style and I am curious if anyone knows how to remove the shadow frame on QPlainTextEdit. Even after attempting to customize the CSS with { border: none }, the shadow continues to be displayed. ...

cssqt

Chrome browser CSS trapezoid shape clickability problem

I am attempting to make a trapezoidal perspective shape clickable for the entire area. It's currently working in Firefox and IE, but I'm encountering issues with Chrome. Here is a demonstration of the shape and a link: http://jsfiddle.net/9n9uh6 ...

htmlcssperspectivecss-shapes

Tips for passing a function to express-handlebars within a node.js-express application

I've been attempting to pass a function in express-handlebar, but for some reason it's not working. In my setup, I have app.js serving as the server file and index.handlebars as the handlebar file. In app.js: const express=require('expres ...

javascriptnode.jsfunctionexpressexpress-handlebars

Utilizing Vue.js to track and navigate through browsing history using the browser's

I'm currently working on an application using Vue and Laravel. Instead of relying on vue-router, Laravel is managing my routes. Within my parent component, I am dynamically loading components based on the state of an object in the data. One of the m ...

javascriptlaravelvue.js

What is the best way to implement a custom layout with nuxt-property-decorator?

Summary of Different Header Components in Nuxt In order to set a different header component for a specific page in Nuxt, you can create separate layout files. layout ├ default.vue // <- common header └ custom.vue // <- special header for s ...

javascripttypescriptvue.jsvuejs2nuxt.js

Utilize React's Context Provider to centrally manage all state while incorporating async calls

I am currently exploring more refined methods to establish a provider/consumer setup in which an asynchronous call is initiated from the provider, but the consumer does not need to handle state management. Within my context provider, I am fetching data to ...

javascriptreactjs

Tips for targeting an element for focus following a re-render in ReactJS

Within my web application, when a user hits the enter key, they are able to save the current record. A message confirming that the "record has been successfully saved" is then displayed. However, I have noticed that the blinking cursor in one of the input ...

javascriptreactjsuser-interfaceautofocus

Manipulate a value using JavaScript

While the intention is for the button value to switch between 1 and 0, the echo $_POST["ordina"] consistently returns 1. Despite checking the code multiple times, I am unable to identify the issue. <script> function order() { if (document.ordination ...

phpjavascriptformsfunctionbutton

Library or theme with CSS that does not require the use of HTML classes

While there are many popular CSS libraries like Bootstrap and Foundation, they all require adding specific classes to HTML tags for styling. However, I find it tedious to add individual classes like .form-control from Bootstrap to every input element on m ...

htmlcsstwitter-bootstrap

Difficulty with BCRYPT retrieving information from MySQL

As a beginner in programming, I've hit a roadblock and can't seem to find any solutions. I've managed to successfully register users into my database and hash their passwords. Now, I'm trying to implement a login feature for these users ...

javascriptmysqlnode.jsexpress

The jQuery dynamic fields vanish mysteriously after being validated

I am facing an issue with my jQuery and validation. Below is the code snippet causing the problem: var fielddd = 1; $(document).on('click', '.btn.add-field', function() { fielddd++; $('#newfield').append('< ...

javascriptphpjqueryhtml

Is there a way to stop a for-in loop within a nested forEach function in JavaScript?

I am facing a situation with nested loops for (var key in params) { if (Array.isArray(params[key])) { params[key].every(function(item) { let value = something(item.start, item.end); if (value === item.start || value == item.end) { ...

javascriptfor-loopforeachbreak

a problem with images overflowing in CSS

I am currently working on setting up a personal blog for myself, but I have encountered an issue with the overflow property. On my home page, I have a div that contains text and images for reviews. When users click on the "read more" button, the full parag ...

htmlcss

When iterating through a JavaScript object, opt for utilizing references instead of repeatedly specifying the path

for (var element in array[index1][index2][index3].property) { alert(array[index1][index2][index3].property[element].data); } Is there a more succinct way to achieve the same result by referencing the object directly like this: for (var ...

javascript