Creating a tooltip with a left arrow and a bordered design

I am looking to create a tooltip that displays its content after clicking on the tooltip tip icon. Currently, it only works on hover, but I want it to be clickable and mobile responsive.

Desktop design should resemble: https://i.sstatic.net/FQPyt.png

Mobile design should look like:

https://i.sstatic.net/rwkAi.png

Is there an alternative method to achieve this with my current code or another approach?

.tooltip-inner{
  max-width: 527px;
  /* width: 600px;  */
    padding:10px 15px;
    color:#212121;
    text-align:center;
    background: #fff;
    font-size: 16px;
    line-height: 23px;
    font-family: Arial;
    border: 2px solid #D6D6D6;
    -webkit-border-radius:9px;
    -moz-border-radius:9px;
    border-radius:6px;
    text-align: left;
    position: relative;
}
.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip.bs-tooltip-right .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::after, .tooltip.bs-tooltip-right .arrow::after {
  right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
  margin-left: -50px;
}
.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::after, .tooltip.bs-tooltip-right .arrow::after {
  border-color: rgba(136, 183, 213, 0);
border-right-color: #fff;
border-width: 15px;
margin-top: -15px;
}
.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip.bs-tooltip-right .arrow::before {
  border-color: rgba(214, 214, 214, 0);
border-right-color: #D6D6D6;
border-width: 18px;
margin-top: -18px;
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <a style="position:relative;" class="text-dark" data-toggle="tooltip" data-html="true" data-placement="right" title="The email address is not made public and will only be used if you wish to receive a new password or wish to receive certain news or notifications by email.">
     Hover here
    </a>

<h1>Dummy text</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script>
      $(function () {
        $('[data-toggle="tooltip"]').tooltip()
      })
  </script>
  </body>
</html>

javascriptjqueryhtmlcssbootstrap-4

Answer №1

  1. To determine if the device is in Mobile or desktop, you need to start by checking the screen size.

$(window).resize(function(){
    var tooltipPosition = ($(window).width < 768) ? 'left' : 'right';
    $('[data-toggle="tooltip"]').tooltip('placement': tooltipPosition)
    });

Answer №2

Include the data-trigger attribute in your tag to specify the trigger event for your tooltip. Bootstrap is a responsive framework, so you don't have to worry about different screen sizes. :)

For more customization options, check out this link

.tooltip-inner{
  max-width: 527px;
  /* width: 600px;  */
    padding:10px 15px;
    color:#212121;
    text-align:center;
    background: #fff;
    font-size: 16px;
    line-height: 23px;
    font-family: Arial;
    border: 2px solid #D6D6D6;
    -webkit-border-radius:9px;
    -moz-border-radius:9px;
    border-radius:6px;
    text-align: left;
    position: relative;
}
.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip.bs-tooltip-right .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::after, .tooltip.bs-tooltip-right .arrow::after {
  right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
  margin-left: -50px;
}
.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::after, .tooltip.bs-tooltip-right .arrow::after {
  border-color: rgba(136, 183, 213, 0);
border-right-color: #fff;
border-width: 15px;
margin-top: -15px;
}
.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip.bs-tooltip-right .arrow::before {
  border-color: rgba(214, 214, 214, 0);
border-right-color: #D6D6D6;
border-width: 18px;
margin-top: -18px;
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <a style="position:relative;" class="text-dark" data-trigger="click" data-toggle="tooltip" data-html="true" data-placement="right" title="The email address is not made public and will only be used if you wish to receive a new password or wish to receive certain news or notifications by email.">
     Click here to display tooltip
    </a>

<h1>Placeholder text</h1>
<p>Lorem Ipsum is simply placeholder text of the printing and typesetting industry. It has been the industry's standard since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script>
      $(function () {
        $('[data-toggle="tooltip"]').tooltip()
      })
  </script>
  </body>
</html>

Answer №3

One method to achieve this style is by using a popover.

$(function () {
        $('[data-toggle="popover"]').popover()
      })
.bs-popover-right, .bs-popover-left{
  max-width: 527px;
    padding:10px 15px;
    color:#212121;
    background: #fff;
    font-size: 16px;
    line-height: 23px;
    font-family: Arial;
    border: 2px solid #D6D6D6;
    -webkit-border-radius:9px;
    -moz-border-radius:9px;
    border-radius:6px;
}
.popover-tip {
  width: 40px;
  height: 40px;
}
.popover-tip:focus {
  outline: 0;
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  
  </head>
  <body>


<button type="button" class="bg-transparent border-0 popover-tip mt-5" data-toggle="popover" data-content="The email address is not made public and will only be used if you wish to receive a new password or wish to receive certain news or notifications by email.">Click here</button>


    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

  </body>
</html>

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

Alter the background color of a React application with a single click in a spontaneous manner

When I attempted to change the background color of the entire page randomly by clicking a button, it only changed the background of the div element. Here is the code snippet I used: import React from "react"; class Home extends React.Component { ...

javascriptreactjs

Incorporate fresh selections into an already established custom autocomplete feature in real time

Is it possible to dynamically insert a label into current categories using jQuery UI custom autocomplete? I have implemented a customized autocomplete following the example outlined here in the jQuery UI documentation: <html lang="en"> <head> ...

jqueryjquery-uiautocompletejquery-widgetsjquery-widget-factory

Show a picture outside of the dropdown container

I'm currently navigating the world of web development and I'm facing a challenge with getting an image to display outside of a dropdown div. Despite numerous attempts at setting the image's position to relative, with overflow-visible, I have ...

htmlcsstailwind-cssalpine.js

Create an onClick function that can direct you to a specific hyperlink without triggering a new browser window to open

Material UI is being used and a home icon has been imported into the navbar as shown below <Home edge="start" color="inherit" aria-label="home" onClick={event => window.location.href='/ <Home fontSize="lar ...

javascriptreactjsrxjsonclickmaterial-ui

JQuery Accordion SubMenu/Nested Feature malfunctioning

I have successfully implemented a JQuery Accordion on my website and it is functioning properly, opening and closing as expected. However, I am facing an issue when trying to add a submenu within the accordion. The submenu does not work as intended and lac ...

javascriptjqueryjquery-ui-accordion

Basic media query does not affect div resizing or font changes in Chrome or Internet Explorer

I am facing an issue with a simple media query that is not working as expected in Chrome or IE, but strangely it works fine in FF. I have tried various formulations of the media query without success. Any assistance would be greatly appreciated. Below is ...

htmlcss

Troubleshooting: Unable to execute a jQuery search in the database after applying accent-neutralization in datatables

Greetings, I am working with a table using the DataTables jQuery plugin. In my index.php file in the footer (pages loaded using switch), I have added a script to neutralize accents for search purposes so that I can search without diacritics. However, this ...

phpjquerymysqldatatables

Customize the style based on the state using styled components

I am currently working with a function component that looks like this: const Navbar = ({setNav, nav}) => { const [justify, setJustify] = useState('space-around') //get localStorage const user = JSON.parse(localStorage.getItem('user& ...

cssreactjscomponentsstate

Combining two interconnected documents in Mongoose: merging references

Currently, I am in the process of learning how to work with NoSQL after having a background in relational databases. For this specific project, I am utilizing Express along with Mongoose. The main challenge I am facing involves callbacks when attempting t ...

javascriptnode.jsmongodbexpress

Is it possible to merge createStackNavigator with createBottomTabNavigator for enhanced navigation functionality

Current Situation : My app currently has three tabs for navigation (School, Admin, Family); I am now facing a challenge as I want to add additional screens that do not require tabs for navigation. These screens will be accessed using this.props.navigati ...

javascriptreactjsreact-nativereact-native-navigation

Generate live references to interact with elements

I am facing a challenge in my vue app where I need to access a specific element, but there are multiple duplicate elements generated through a component. The issue is that the ref attribute only seems to work on the first component. How can I target a part ...

javascriptvue.jsvuejs3

Determine the number of Fridays that fall between two dates using JavaScript or jQuery

Can you help me calculate the total number of a specific day between two given dates? For instance, if I have a start date and end date stored in a variable, I would like to know how many Fridays fall within that timeframe. ...

javascriptjquery

Ways to determine if an object has a provided attribute?

As I work on creating a small website using django, I encountered an issue: In my site, I want to view posts in detail, but not every post includes an image attribute - leading to errors when trying to display images that do not exist. The solution lies ...

htmldjangodatabase

Guide on centering an unfamiliar element in the viewport using HTML, CSS, and JavaScript

In the process of developing my VueJS project, I have successfully implemented a series of cards on the page. However, I am now facing a challenge - when a user selects one of these cards, I want it to move to the center of the screen while maintaining its ...

javascripthtmlcssdom

Receive real-time updates on incoming messages in your inbox

I'm seeking advice on implementing live update messages in my code. Here's what I have so far: <script> function fetch_messages(){ var user_id = "1" // example id $.ajax({ url: "do_fetch.php", t ...

phpjavascriptjqueryajax

I am encountering an issue where my ejs file is not rendering properly even after moving my static files to the public folder and including the line of code app.use(express.static("public")). Can anyone help

After relocating the index.html and css files to the public folder and adding app.use(express.static("public)) in app.js, everything was working fine and the list.ejs was rendering correctly. However, there seems to be an issue now. const express = re ...

javascripthtmlexpressejs

Introducing a new left overlay panel popup feature using jQuery Mobile

I'm currently developing a mobile app and I'm having trouble getting a popup to launch on the left overlay panel when clicked on "Sign out". I can't figure out where I'm going wrong. Can someone please provide some suggestions? Thank yo ...

htmljquery-mobile

Using AngularJS to execute jQuery code after the page has finished loading

I have a carousel of images on my website: Here is the code I am using: <div id="carousel"> <ul class="bjqs"> <li ng-repeat="image in dealer.images"><img src="{{image}}" alt="{{image}}" /></li> </ul& ...

jquerysliderangularjs

The placement of the sliding navigation menu is consistently positioned beneath the header

I created a jQuery menu that's also available on JSfiddle here: $(document).ready(function () { $(".navigation_button").on('click', function () { var $panel = $(this).next('.panel'); if ($panel.is(':visible ...

jqueryhtmlcss

Creating compressed files using JavaScript

I am currently working on unzipping a file located in the directory "./Data/Engine/modules/xnc.zip" to the destination folder "./Data/Engine/modules/xnc". Once I have completed writing to these files, I will need an easy method to rezip them! While I wou ...

javascriptnode.jszipunzip