在鼠标输入时设置标签固定位置答案

【问题标题】：Set label fixed position on mouse enter在鼠标输入时设置标签固定位置
【发布时间】：2020-10-30 03:17:03
【问题描述】：

我正在尝试使用 jquery 在圆圈上创建简单的悬停效果，但我被困在执行这个简单任务的过程中，问题是，当鼠标到达红色圆圈时，标签是城市重叠的位置圆圈区域，标签围绕圆圈移动，我希望标签固定在红色圆圈的顶部。 P.S 当我试图写简短的命名城市标签重叠的描述时，被忽略了。例如 const regionObject = {"philadelphia" : "Philadelphia",}

在此处输入代码

$(function(){


   


    $('circle').mouseenter(function(e){

        const circleId = $(this).attr('id');


      
        const regionObject = {
            "philadelphia" : "Philadelphia, sity in pennsylvania",
                    }


        

            var div = $(`<div class="current_region">
            <div class="current_region_box">
            <p>${regionObject[circleId]}</p> 
            </div>
            <div class="region_pointer"></div>
            </div>`)
            .css({
                "display": "block",
                "left": (e.pageX - 40) + 'px',
                "top": (e.pageY - 45) + 'px'
            })
            .appendTo(document.body);

    
    }).mouseout(function(){
    $('body').find('.current_region').remove();
});


    
});

.current_region {
    position: absolute;
  }
  
  .current_region_box {
    position: relative;
    z-index: 10;
    border-radius: 30px;
    background: white;
    box-shadow: 0px 2px 6px 1px rgba(18, 40, 112, 0.5);
    padding: 4px 12px;
  }
  
  .current_region_box p {
    font-family: firagolight;
    font-size: 15px;
  }

  .current_region_box {
    position: relative;
    z-index: 10;
    border-radius: 30px;
    background: white;
    box-shadow: 0px 2px 6px 1px rgba(18, 40, 112, 0.5);
    padding: 4px 12px;
  }
  
  .current_region_box p {
    font-family: firagolight;
    font-size: 15px;
  }

  .region_pointer {
    position: absolute;
    z-index: 9;
    bottom: -9px;
    right: 3px;
    left: 0;
    margin: auto;
    width: 25px;
    height: 25px;
    background: white;
    border-radius: 5px;
    transform: rotate(45deg);
    box-shadow: 0px 0px 4px -1px grey;
  }

<!DOCTYPE html>
<html>
    <head>
        <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">
        <!-- Font Awesome -->
        <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    
        <!-- Developer CSS -->
        <link rel="stylesheet" type="text/css" href="./map.css">
        <!-- Jquery-->
        <script src="js/jquery-3.4.1.min.js"></script>
        
    </head>
    <body>
        <div class="example" style="text-align: center; padding-top: 50px; cursor: pointer; " >
            <svg height="100" width="100">
                <circle id="philadelphia" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"   />
                Sorry, your browser does not support inline SVG.  
              </svg>
        </div>


        

<!--Boostrap 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 src="./map.js"></script>
</body>
</html>

【问题讨论】：

标签： html jquery css svg geometry

【解决方案1】：

您可以使用这个纯 CSS 解决方案，您可以使用 ::after 伪类，它在悬停元素时显示。您可以通过 top 和 left 属性来定位工具提示。

body { margin: 50px }
#circle {
  width: 200px;
  height: 200px;
  background-color: red;
  border-radius: 50%;
  position: relative;
  border: 3px solid black;
}

#circle:after {
  content: "This is tooltip";
  position: absolute;
  top: -20px;
  left: 50%;
  display:none;
  
  /* these are just to make it prettier */
  background-color: black;
  padding: 10px;
  color: white;
  border-radius: 5px;
  opacity: .7; /* erase this if you dont want it transparent */
}

#circle:hover:after {
  display: block;
}

&lt;div id="circle"&gt;&lt;/div&gt;

工具提示的值可以取自圆形元素的任何属性，例如标题。在 css 中，您将使用： content: attr(title)

【讨论】：

【解决方案2】：

使用您的代码，您可能希望获得圆心并使用 cx 和 cy 属性来定位标签。

当鼠标触摸标签时也会闪烁。要解决此问题，您需要在 CSS 中添加 .current_region{pointer-events:none;}

$(function(){


   


    $('circle').mouseenter(function(e){

        const circleId = $(this).attr('id'); 
        const cx = Number($(this).attr('cx'));
        const cy = Number($(this).attr('cy'));

      
        const regionObject = {
            "philadelphia" : "Philadelphia, sity in pennsylvania",
                    }


        

            var div = $(`<div class="current_region">
            <div class="current_region_box">
            <p>${regionObject[circleId]}</p> 
            </div>
            <div class="region_pointer"></div>
            </div>`)
            .css({
                "display": "block",
                "left": (cx + 40) + 'px',
                "top": (cy - 20) + 'px'
            })
            .appendTo(document.body);

    
    }).mouseout(function(){
    $('body').find('.current_region').remove();
});


    
});

.current_region {
    position: absolute;
  }
  
  .current_region_box {
    position: relative;
    z-index: 10;
    border-radius: 30px;
    background: white;
    box-shadow: 0px 2px 6px 1px rgba(18, 40, 112, 0.5);
    padding: 4px 12px;
  }
  
  .current_region_box p {
    font-family: firagolight;
    font-size: 15px;
  }

  .current_region_box {
    position: relative;
    z-index: 10;
    border-radius: 30px;
    background: white;
    box-shadow: 0px 2px 6px 1px rgba(18, 40, 112, 0.5);
    padding: 4px 12px;
  }
  
  .current_region_box p {
    font-family: firagolight;
    font-size: 15px;
  }

  .region_pointer {
    position: absolute;
    z-index: 9;
    bottom: -9px;
    right: 3px;
    left: 0;
    margin: auto;
    width: 25px;
    height: 25px;
    background: white;
    border-radius: 5px;
    transform: rotate(45deg);
    box-shadow: 0px 0px 4px -1px grey;
  }
  
  .current_region{pointer-events:none;}

<!DOCTYPE html>
<html>
    <head>
        <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">
        <!-- Font Awesome -->
        <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    
        <!-- Developer CSS -->
        <link rel="stylesheet" type="text/css" href="./map.css">
        <!-- Jquery-->
        <script src="js/jquery-3.4.1.min.js"></script>
        
    </head>
    <body>
        <div class="example" style="text-align: center; padding-top: 50px; cursor: pointer; " >
            <svg height="100" width="100">
                <circle id="philadelphia" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"   />
                Sorry, your browser does not support inline SVG.  
              </svg>
        </div>


        

<!--Boostrap 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 src="./map.js"></script>
</body>
</html>

【讨论】：